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!

Thanks Tom! Here's a staging demo site with the top bar added: http://www.tawaphysio.riedr.com/

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 :)

That works great Tom for the desktopview. With the mobile menu though the top bar ends up covering up most of the mobile menu. Is there a way to slide the mobile menu down?

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

Thanks Tom, that works great for me on Firefox and Chrome. On Safari and Edge though the top bar does not appear. Are there some vendor prefixes I should be adding?

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;
}

Thanks Tom, that fixed the cross-browser issue for the sticky menu, but now I am getting overlap again between the top-bar and the desktop and mobile header. Any other options?

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

Thanks for your help Tom!

You're welcome :)