Archived topic
Thoughts on creating this custom header?
7 replies · Started by Arp on June 11, 2020
Client requested a simple header: Logo in the center, one navigation item on its left, a second navigation item on its right, and the rest of the navigation is located in the off-screen menu (on all devices).
My thought is that I need to use the header element and hard code the two links & the logo into it, and then use the off screen menu but how would I add the hamburger menu?
Off to investigate the possibilities...
Hi there,
Does something like this help?
https://docs.generatepress.com/article/centering-logo-navigation/
Would that work with the off screen menu on screen at all device sizes?
It doesn't work because the off screen menu needs to be on-screen at all times. Sounds like I have to customize the header but I have not been able to crack this nut yet :/
Also, can the hamburger icon be assigned to the right? Guessing that would just be CSS.
Hi there,
that method would work.
Simply add a Menu to the Primary Navigation for your 2 x links.
Add a Menu to your Off Canvas and set it to display on Desktop Only.
In Customizer > Layout > Primary Navigation --> set the Mobile Menu Breakpoint to 0
That should keep the desktop primary nav and the off canvas toggle in view all the time.
I'll try that. And the off canvas menu would still work on mobile?
That did it! All I have to do is hide the two left/right links on mobile. Thanks for the help!
You're welcome
