Sticky navigation menu height on mobile

Hi Jamal,

Just making sure...so basically you want the mobile header height to be different than sticky mobile header height?

Hi Leo

I have not enabled mobile header, i just wanted options in Layout > Primary Navigation > Menu item height to be different than Layout > Sticky navigation > Menu item Height.

On desktop everything works as it should but on mobile i can't seem to make it work.

So currently you have a mobile Menu Item Height set by clicking the mobile toggle in Customizer > Layout > Primary Navigation, and you want that height to be different when the user scrolls down?

I think i got it to work with this custom css, please let me know if there is a better way to do. Thanks

@media( max-width: 768px ) {
    .main-navigation .main-nav ul li a,
    .menu-toggle,
    .main-navigation .mobile-bar-items a {
        line-height: 50px;
    }
}

Looks great, although you should be able to do that by clicking the mobile icon in Customize > Layout > Primary Navigation next to the menu item height option.

The sticky navigation part is what i was having problems with, Tom. I want the normal navigation at 80px and sticky at 50px but it's not happening. I will send you a link so you see what i mean.

Edit: Not sure if email was sent, it shows processing. Anyway here is the link

Tested this on another install and its still not working. Same value is being set for both the desktop and mobile sticky navigation.

So you're only having the issue on mobile, correct? Right now the sticky + static menu will use the same height on mobile (whatever you have set in Customize > Layout > Primary Navigation > Menu item height (mobile).

A sticky height on mobile will likely come at some point, but I feel like the transition etc.. is overkill for mobile browsers. Settings a more narrow, static height on mobile seems to be best for UX.

I will use a narrower mobile menu item height, thanks for the clarification.

No problem - I'll see what I can do about the sticky height on mobile :)