Setting for menu item height for sticky navigation mobile

Hi there,

Increasing the Menu Item height in Appearance > Customize > Layout > Sticky Navigation should increase the height of the sticky nav correspondingly.

I see. You can try adding this through Appearance > Customize > Additional CSS:

nav#sticky-navigation.is_stuck {
    min-height: 120px;
}

Replace 120 with your preferred value.

1. Have you cleared cache?

2. Is there any other CSS in the Additional CSS field? If so, can you try moving Fernando’s CSS to the top of the field to test?

And if the CSS is only for mobile, I would recommend adding a media query like this to wrap Fernando’s CSS:

@media(max-width:768px) {
 Fernando's CSS here
}

Let me know 🙂

Hi Charles,

For reference, can you share the link to the site in question?

Can you provide admin login credentials as well through the Private Information field? I’ll check what’s causing it not to work.

You have an extra } at the very bottom of Additional CSS. It’s causing a syntax error. Can you remove that first? Let’s see how it goes afterward.

I see. You’re using a mobile header. Try this:

 nav#mobile-header.is_stuck {
    min-height: 100px;
}

Hi Charles,

Do you want the sticky navigation looks exactly the same as the navigation?

If so, I would recommend disabling the GP sticky navigation option and using this CSS to make the navigation sticky：

nav#site-navigation,nav#mobile-header {
    position: sticky;
    top: 0;
}

Let me know if this helps!