How to reduce the height of the menu in the mobile version

Patrirs20 · December 2016

Hi!

This is the page http://lllu.es/realfooding/

In mobile version, the menu is too high. How I can fix it?

Thanks!

Albert · December 2016

Hi,

we checked your site but we do not understand what's "too high". Do you mean to decrease logo size on mobile devices?

Patrirs20 · December 2016

Hi, in responsive version, margin top an margin bottom are too large with respect to the size of the logo. The menu area is then too wide.

http://lllu.es/realfooding/

Albert · December 2016

As you can see on the following screenshot http://pasteboard.co/eNgNG9QOS.png it's due to your own settings. You set the logo to 194px height and that's why it is so large on mobile. So if you want to decrease it's size on mobile only, you need to use the following css:

@media only screen and (max-width: 767px) {
    #Top_bar #logo, .header-fixed #Top_bar #logo, .header-plain #Top_bar #logo, .header-transparent #Top_bar #logo {
        height: 50px !important;
        line-height: 50px !important;
    }
    #Top_bar a.responsive-menu-toggle { 
        top: 40px !important; 
    }
}

Patrirs20 · December 2016

Thanks! Now appear correctly... but, I have a new problem :S

Since I've introduced the CSS, the options look like this http://lllu.es/descargas/margin.png

Albert · December 2016

This has completely nothing to do with the theme. You simply zoomed-in your screen and that's why options are distorted.

Patrirs20 · January 2017

Hello!

Keep the same...

http://lllu.es/realfooding and the css is in the theme options... http://lllu.es/descargas/captura-menu.jpg

Albert · January 2017

When we were checking your site last time, the code was different and above css was working. But now looks like its because of header's height. To decrease current header height, you need to use the following css:

@media only screen and (max-width: 767px) {
    body:not(.template-slider):not(.header-simple) #Header {
        min-height: 0 !important;
    }
}

Patrirs20 · January 2017

Great! Thanks

Albert · January 2017

You're welcome!

How to reduce the height of the menu in the mobile version

Comments