Archived topic

Sticky navigation padding

3 replies · Started by Michael on December 2, 2018

Viewing posts 1–4 of 4

December 2, 2018 at 5:01 pm #746343

Hi,

I have a full width navigation on this site that has left and right header padding of 40px.

When sticky on desktop is used that padding is removed when the sticky is activated scrolling down the page.

Which class or id do i target to add the 40px padding back in for the sticky nav?

thanks,

December 2, 2018 at 5:41 pm #746360

Hi there,

This method might works best:
https://docs.generatepress.com/article/navigation-as-a-header/

Let me know if this helps :)

December 2, 2018 at 6:06 pm #746377

Hi Leo, I looked at that method but for a few reasons didn't go with it.

After a bit more testing I found this code does what I want.

@media (min-width: 769px) {
    .main-navigation.sticky-navigation-transition .navigation-logo img {
        padding-left: 40px;
    }
    .nav-float-right .is_stuck.main-navigation ul {
        padding-right: 40px;
    }
}

Is there anything wrong with using this way?

December 2, 2018 at 7:58 pm #746402

Hmm looks good I think.

I think this should also work:

@media (min-width: 769px) {
    .main-navigation.navigation-stick .inside-navigation {
        padding: 0 40px;
    }
}

This archived topic is closed to new replies.

Start building better websites today.