Make secondary navbar from Dispatch fixed (sticky) on screen.

Hi there,

Give this CSS a shot:

.second-nav {
    position: sticky;
    top: 50.5px; /* height of your primary navigation */
}

Let me know :)

Well, it worked but it is behaving a little weird on desktop, getting above the primary nav and on mobile it is far from the primary nav.
But an as good as solution would be having another secondary navbar exactly like that one at the bottom of the page right before the footer.

Hi there,

you can use media queries to make the element behave differently for each device size for example:

.second-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 50.5px;
}

@media (max-width: 768px) {
    body {
        margin-bottom: 50px;
    }
    .second-nav {
        position: fixed;
        top: unset;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }
}

This will make the element stick like Tom's code for desktop, on mobile it will fix it to the bottom of the browser.

When you give people CCS code to fix issues. Where are they putting them? is it in the theme itself or in elements?

Nice!
One last question:
And if I want to keep the secondary navbar on its original place but instead have a copy of it above the footer on both mobile and desktop views? Is that possible?

Hi Nanette,

this article explains where to add CSS:

https://docs.generatepress.com/article/adding-css/

You can do one of two things:

1. Use a Navigation Widget in the Footer.
2. Make a duplicate Hook Element: Secondary Navigation - the only difference being is that you would change the Hook to before_footer.

Can you please detail how can I do the second action?

Go to Appearance > Elements.
Within you'll see a Hook element named Secondary Nav.

Edit that to see the Content and settings.

Then simply Add New Hook and create a duplicate of the original one. Just change the Hook for second one to before_footer

More info on Hook Element here:

https://docs.generatepress.com/article/hooks-element-overview/

Thank you, guys!

You're welcome - glad we could be of help.