[Resolved] Sticky navigation issues

[Emma]

Hi, I’m having some issues with my sticky navigation. The main navigation has a small amount of padding to the left and right (I added this using the header padding settings), however the sticky navigation doesn’t, so when you scroll down, the sticky navigation is out of alignment. Is there any way to sort this? Is there a setting to add some padding to the sticky navigation so that the sticky nav is the same as the main nav?

I also noticed there is a setting to ‘use navigation as header’, should I be using this option with the sticky navigation? If so, is there a way to add padding to it?

Thanks.

[David]

Hi there,

try adding this CSS:

#sticky-navigation .inside-navigation.grid-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

[Emma]

Thanks but this doesn’t seem to solve it? There is still no padding added to the sticky navigation…

[Leo]

The link you provided requires username and password.

Any chance you can unlock it or provide the info through Account Issues?

Thanks 🙂

[Emma]

Thanks, yes it’s still under construction. I have put it live so you should be able to view it now.

[Leo]

I would say use the navigation as a header option is the way to go.

Then set the inner width to contained:
https://docs.generatepress.com/article/navigation-layout/#inner-navigation-width

Then use this CSS:

.inside-navigation.grid-container {
    max-width: 1800px;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know 🙂

[Emma]

This doesn’t work either, the navigation and the sticky navigation are both the same doing it this way but I have lost the padding on the navigation. I also can’t see how to control the height of the main navigation when using the navigation as the header?

[Leo]

Doesn’t look like you’ve set the inner navigation width to contained as suggested above?
https://docs.generatepress.com/article/navigation-layout/#inner-navigation-width

Then my CSS should work as adding the padding.

The height is controlled by menu item height:
https://docs.generatepress.com/article/menu-item-height-width/

[Emma]

Nearly there… the menu is now fine but by changing the menu item height to get it to how it was before, it has also added big spaces between each menu item on the mobile menu.

[Emma]

The padding on the main navigation is also causing some issues on my single posts which you can see if you look at one of the posts. I have a border on the bottom which doesn’t go right to the end now. Maybe it’s best if I forget about the sticky header, it’s not imperative to the site.

[Leo]

You can also adjust the mobile menu item height by using the mobile toggle:
https://docs.generatepress.com/article/menu-item-height-width/

As for the single posts issue, are you referring to the shadow?

If so replace:

.inside-navigation {
    box-shadow: 0px 15px 10px -15px #ddd;
}

with

#site-navigation {
    box-shadow: 0px 15px 10px -15px #ddd;
    position: relative;
}

[Emma]

Yes, I need the box shadow there because both the navigation background and the main background is white. It’s better but still not perfect, it still doesn’t quite go all the way across

[Leo]

Try playing with the shadow number a bit.

For example, this should make it full:

#site-navigation {
    box-shadow: 0 5px 8px -1px rgba(0,0,0,.4);
    position: relative;
}

[Emma]

That’s great, thanks

[Leo]

No problem 🙂

[Author]

Posts