[Resolved] 2 line sticky navigation

Hi Sean,

You should be able to set this up with some custom CSS.

Can you add the top bar to your site and then link me to it so I can write something up?

Thanks!

This is likely the only way to do it:

.top-bar {
    position: sticky;
    top: 0;
    z-index: 200;
}

.main-navigation.navigation-stick {
    top: 39px !important;
}

Some browsers have poor support for position: sticky, in that case you can do this:

.top-bar {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 200;
}

.main-navigation {
    top: 39px !important;
}

Let me know 🙂

I just adjusted the CSS above so it should apply on mobile as well 🙂

Ugh, just bad browsers with bad support for position: sticky (which is a shame).

You can do this if you need a more cross browser friendly solution:

.top-bar {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 200;
}

Updated the original reply here: https://generatepress.com/forums/topic/2-line-sticky-navigation/#post-448194

You’re welcome 🙂