- This topic has 11 replies, 2 voices, and was last updated 3 years, 5 months ago by
.
-
Posts
-
I’m trying to create navigation that looks somewhat like this when scrolled (site URL deleted). I gather from forum posts I’ve read here that it is not trivial to lock the top-bar or a secondary nav on top of the sticky navigation menu. Any suggestions for the best way to approach this?
Also, is there any way to get the top bar appear only after scrolling on desktop, but on load for mobile?
GeneratePress 2.0Lead Developer
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!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentThanks 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 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentThat 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 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentThanks 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; }Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentThanks 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
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentThanks for your help Tom!
You’re welcome 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development
- You must be logged in to reply to this topic.