[Resolved] Sticky Navigation left and right padding to match header

[Sarah]

Hi, I’ve been looking through the forum to see if I could find an answer for some CSS to sort this out but I’ve not managed to locate a solution.

On the site http://movemorenaturally.co.uk/from-the-feet-up/ you can see I’ve got 40px padding left and right on the Header.

I’ve set the sticky navigation which works fine but I can’t figure out the CSS to add the same padding so it doesn’t ‘jump’ and appear wider when it appears on scroll. I want it to look the same as the Header.

How can I add the same padding via CSS?

Thanks for your help,
Sarah

[Leo]

Hi there,

Try using this method: https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

[Sarah]

That’s worked a treat Leo, thank you!

I added this CSS for some padding:
.main-navigation
{
padding-right: 40px;
padding-left: 40px;
margin-top: 5px;
margin-bottom: 5px;
}

But unfortunately when I scroll, I lose the shopping trolley icon from the right and lose the padding. Sorry, I know I need to get to grips better with CSS, have tried playing around with .main-navigation.navigation-stick but that doesn’t seem to make any difference. Any help you can offer is greatly appreciated!

[Leo]

Try something like this instead of using padding:

.inside-navigation {
    max-width: 1800px;
    margin: auto;
}

[Sarah]

Yes, that works great! Thanks again Leo, I really REALLY appreciate your help 😀

[Leo]

No problem!

[Author]

Posts