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

Home Forums Support Sticky Navigation left and right padding to match header

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #367833
    Sarah Cairncross

    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

    GeneratePress 1.4
    GP Premium 1.4.2
    #367970
    Leo
    Staff
    Customer Support
    #368070
    Sarah Cairncross

    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!

    #368091
    Leo
    Staff
    Customer Support

    Try something like this instead of using padding:

    .inside-navigation {
        max-width: 1800px;
        margin: auto;
    }
    #368139
    Sarah Cairncross

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

    #368147
    Leo
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.