Archived topic
Mobile Menu Location
3 replies · Started by Andrew on December 30, 2021
I'm working on rebuilding our website with a new design, I've gotten desktop close to how I want it(header + top bar),I have built the top bar using the before_header hook, I was wondering when it gets to mobile is there a easy way to move the location of the mobile menu up to the top bar area that I created? I know I can do it using absolute positioning but was looking for a better way. Is there any php I can add or something along those lines?
Hi there,
what is the end result meant to look like?
Are you wanting just the Phone CTA and the Hamburger inline ?
Hi David, Please see attached mockup screenshot. My plan that I have currently Is to utilize the hide-on-mobile to get rid of the phone number. Then add the two new buttons with hide-on-desktop hide-on-tablet, but wasn't sure if using absolute position was a good option. I always feel like I'm hacking something when I do it that way, thats how I had to do the logo on desktop which probably isn't the best way but it worked. Need to learn grid and flex box to make things easier. If you don't mind any feedback on how I positioned the logo on desktop would be greatly appreciated as well, not sure if there is a better way. Thanks for the help!
If the mobile menu was to use the Off Canvas Panel, then you could add your own custom menu toggle to your top bar element.
The basics of doing that with a Hook can be found here:
https://generatepress.com/forums/topic/possible-layout-2/#post-1940076
But ultimately you just need an element like so:
<span class="slideout-toggle hide-on-desktop"><a href="#">Your mobile icon</a></span>
The slideout-toggle class is what triggers the opening of the off canvas.
