Header height in the mobile version

[Dmitriy]

Hello! I want to change the header height and the height of the slider in the mobile version. To increase the height of the header and increase the height of the slider.

and How change bg color of mobile version menu?

[Sonnal S Sinha]

Hi,

Kindly show us your website URL so that we can assist further.

Regards,
Brad

[Dmitriy]

Link Goodzoneclub

[Sonnal S Sinha]

Hi,

Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

Add this code there:

@media screen and (max-width:767px) {
.logo { margin:30px auto;}
.theme-default .nivoSlider img { width:180% !important; max-width:180% !important; margin-left:-30%;}
.mobile_nav a { background-color:#dd8500 !important;}
}

Regards,
Brad

[Dmitriy]

Thank you. Still there is a question.
Thanks to you, I changed the code a bit:

@media screen and (max-width:767px) {
.logo { margin:10px; max-width: 10%;}
.theme-default .nivoSlider img { width:280% !important; max-width:280% !important; margin-left:-30%;}

Here’s what I got:

But I want the text under the logo to be next to it, like in the picture below

Link Goodzoneclub

[Sonnal S Sinha]

Hi,

Kindly use this css code:

Remove This CSS
.logo { margin:10px; max-width: 10%;}

Add This CSS code there:
.logo {
margin: 10px auto;
max-width: 50%;
}

Regards,
Brad

[Dmitriy]

I changed the code like you said, but that’s not what I need.
Result on the picture below

I want it to be like the picture below
The heder and logo are minimized, and the text is made to the right of the logo.

[Dmitriy]

I want it to be like the picture below

[Sonnal S Sinha]

Hi,

Kindly use this css code:

Remove This CSS
.logo { margin:10px; max-width: 10%;}

Add This CSS code there:
.logo { max-width:100%; margin:10px; text-align:left; min-height:65px;}
.header .logo img { height:auto !important; width:20%; float:left; margin-right:20px;}
.logo span.tagline { padding-top:20px;}
}

Regards,
Brad

[Dmitriy]

Thank you! it works!
But the problem with the slider
I took advantage of your decision:
.theme-default .nivoSlider img { width:180% !important; max-width:180% !important; margin-left:-30%;}
Changed it to the following code so that the slider was on the whole screen
.theme-default .nivoSlider img { width:380% !important; max-width:380% !important; margin-left:-30%;}
Result on as in the picture below

All is well, but the picture is on a too large scale. Is it possible to enlarge a picture without such a zoom?

[Sonnal S Sinha]

Hi,

This is not possible to enlarge picture without zoom.

Regards,
Brad

[Author]

Posts