Archived topic
Sticky Navigation left and right padding to match header
5 replies · Started by Sarah on August 17, 2017
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
Hi there,
Try using this method: https://docs.generatepress.com/article/navigation-logo/#navigation-as-header
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!
Try something like this instead of using padding:
.inside-navigation {
max-width: 1800px;
margin: auto;
}Yes, that works great! Thanks again Leo, I really REALLY appreciate your help :D
No problem!
