Sticky navigation issues

Hi there,

try adding this CSS:

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

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

The link you provided requires username and password.

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

Thanks :)

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

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 :)

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?

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/

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.

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.

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;
}

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

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;
}

That's great, thanks

No problem :)