Archived topic
Sticky Nav with logo left, menu toggle centered and contact information right
4 replies · Started by Mirko on April 15, 2019
Hello there,
I have a web project where the designer thinks the header should contain 3 elements: a logo on the left, some contact information on the right and the typical symbol for the slideout menu in the middle. The whole header should only appear when scrolling down and then be sticky.
Ok, sounds easy, but I don´t know how to hook the sticky menu with the fancy transition effect and the slideout menu function. Normally I would create a flexbox container with 3 flex divs, then create a menu and then call it in the header.php with some kind of shortcode, e.g.
, but I don´t know how to insert the GP main navigation.
That´s how it should look in general:
Maybe there´s a hook or anything elese and I´m just too blind to find it in the documentation :)
Thanks a lot for your help and best wishes from Germany
Mirko
Hi there,
If you are using the GP Premium 1.7.8, the easiest solution would be to use the navigation logo:
https://docs.generatepress.com/article/navigation-logo/
Set the navigation alignment to center:
https://docs.generatepress.com/article/navigation-layout/#navigation-alignment
Make it so only the toggle shows:
https://docs.generatepress.com/article/activating-slide-out-navigation/#use-slide-out-navigation-only
Then use the inside_navigation hook to add the contact info:
https://docs.generatepress.com/article/hooks-element-overview/
https://docs.generatepress.com/article/hooks-visual-guide/
If you want the header to only show on scroll, this solution should work:
https://docs.generatepress.com/article/show-sticky-navigation-only/
Note that we've made use navigation as a header an option in the next version of GP Premium which is currently in release candidate already:
https://generatepress.com/forums/topic/gp-premium-1-8-now-in-public-testing/
Lots of info above. Have a look and let me know if you have any questions :)
Hi Leo,
thanks a lot for your immediate help! Your suggestion works fine for me, and my designer will be happy :)
I really like your great and really fast support - Thumbs up!!!
Best wishes from Germany, and have a nice week
Mirko
Glad I could help :)
This might be useful for some other people: https://generatepress.com/forums/topic/phonenumber-link-with-image-to-right-in-main-navigation-logo-left-menu-centere/
