[Resolved] Thoughts on creating this custom header?

[Arp]

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…

[Leo]

Hi there,

Does something like this help?
https://docs.generatepress.com/article/centering-logo-navigation/

[Arp]

Would that work with the off screen menu on screen at all device sizes?

[Arp]

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.

[David]

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.

[Arp]

I’ll try that. And the off canvas menu would still work on mobile?

[Arp]

That did it! All I have to do is hide the two left/right links on mobile. Thanks for the help!

[David]

You’re welcome

[Author]

Posts