Menu on mobile

idee · May 2015

Hi,

So recently i made my logo a little bit bigger with this code:

#Top_bar{ height: 150px !important; }

#Top_bar #logo img { max-height: 90px !important; }

#Top_bar.is-sticky { height: 70px !important; }

#Top_bar.is-sticky #logo img { max-height: 60px !important; }

But their is a problem with the menu on mobile. When i click on the menu it overlaps the header. It does not move the header down. When i remove the code above, then it works fine. But i need this code so i can have a bigger logo. This is the page that i open on my iphone:

You guys have a solution for this?

idee · May 2015

I have also noticed that when i add a header image in Betheme Theme Options then it also works even with the above code. But the problem only occurs when i add individual subheader image in post/page.

Albert · May 2015

Hi,

if you got a problem with menu on mobile, please wrap above code into right media only screen tag:

@media only screen and (min-width: 1240px) {
    #Top_bar{ height: 150px !important; }
    #Top_bar #logo img { max-height: 90px !important; }
    #Top_bar.is-sticky { height: 70px !important; }
    #Top_bar.is-sticky #logo img { max-height: 60px !important; }
}

Menu on mobile

Comments