- This topic has 11 replies, 2 voices, and was last updated 4 years, 5 months ago by
Tom.
-
AuthorPosts
-
December 11, 2017 at 1:28 pm #447228
Sean
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.0December 11, 2017 at 11:07 pm #447460Tom
Lead DeveloperLead DeveloperHi 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-developmentDecember 11, 2017 at 11:42 pm #447485Sean
Thanks Tom! Here’s a staging demo site with the top bar added: http://www.tawaphysio.riedr.com/
December 12, 2017 at 5:02 pm #448194Tom
Lead DeveloperLead DeveloperThis 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-developmentDecember 13, 2017 at 12:20 am #448338Sean
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?
December 13, 2017 at 1:26 pm #448908Tom
Lead DeveloperLead DeveloperI 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-developmentDecember 13, 2017 at 2:11 pm #448950Sean
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?
December 13, 2017 at 2:13 pm #448952Tom
Lead DeveloperLead DeveloperUgh, 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-developmentDecember 13, 2017 at 2:28 pm #448962Sean
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?
December 13, 2017 at 2:30 pm #448965Tom
Lead DeveloperLead DeveloperUpdated 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-developmentDecember 13, 2017 at 6:00 pm #449054Sean
Thanks for your help Tom!
December 13, 2017 at 10:23 pm #449129Tom
Lead DeveloperLead DeveloperYou’re welcome π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.