Archived topic
Header widget next to hamburger menu on mobile
5 replies · Started by Amy on February 15, 2021
Hi there, I've been looking through the forum but can't find an answer to this. I plan to add a phone number to the header in the header widget to show only on mobile inline with the hamburger menu. Ideally the header will have the logo on the left, phone number, and then the hamburger menu on the right.
Thank you for your help!
Hi there,
Can you link us to the site in question to check? So we could advise specifically with how your site is set up. Let us know. :)
Yes! The site is https://draft.mcguirekitchenbath.com/
Hi there,
simplest option would be to:
1. Enable the Mobile Header in Customizer > Layout > Header. You will need to add a Mobile Header Logo.
2. Create a new Block Element ( or Hook Element ):
https://docs.generatepress.com/article/block-element-overview/
2.1 Add your Call Now element to the block content.
2.2 Select the generate_inside_mobile_header hook
2.3 Set the Display Rules to Entire Site.
It may need a little CSS for positioning etc. which we can help with. Let us know.
Thank you for your assistance. This seems like a bit too much work. I am going to approach the problem in a different way.
Its actually quite simple if you want to give it a try?
The second step is simple:
1. Dashboard > Appearance > Elements.
2. New Hook Element
2.1 Add your HTML eg.
<a class="mobile-cta" href="#">Call me</a>
2.2 From the hook list select generate_inside_mobile_header
2.3 Display Rules Tab - set Location to Entire site.
With the Mobile header (step 1 above ) enabled it will place the link between the logo and the hamburger.
:)
