- This topic has 14 replies, 2 voices, and was last updated 6 months ago by David.
July 14, 2020 at 4:41 am #1362960David
A site that is about to go live has had a feature request from the client
This example of a site they like has a mobile menu/header that includes the logo/email-Icon/Phone-Icon and then finally the hamburger drop down
And those 4 items remain when the menu is activated…
Any clues on replicating that ?
Note: What I described does not appear when making a browser narrow, I had to view it on an actual phone.July 14, 2020 at 7:33 am #1363116DavidStaffCustomer Support
If the site is using the Mobile Header you can use a Hook Element to you own content using the
It may require some CSS to position it. Happy to help with that.July 14, 2020 at 3:31 pm #1363666David
I’ll give that a shot!
DaveJuly 14, 2020 at 4:21 pm #1363693DavidStaffCustomer SupportJuly 15, 2020 at 4:18 pm #1364986David
So I have the hook working – did a proof of concept to place some text there.
How would you recommend I add a row of three components to the left of the hamburger menu – image/icon/icon ?
And also when the menu is clicked it covers the header area, is there a simple way to make it start below so the header area is always visible ?
Thanks so much, DaveJuly 16, 2020 at 3:35 am #1365344DavidStaffCustomer Support
Some markup like this would go int the hook:
<div class="custom-menu-bar"> <span class="custom-item"><a href="url"><img src="url_to_image_src" width="50" height="50"></a></span> <span class="custom-item"><a href="url"><img src="url_to_image_src" width="50" height="50"></a></span> <span class="custom-item"><a href="url"><img src="url_to_image_src" width="50" height="50"></a></span> </div>
If you want to share a link to your concept site i can take a look.July 16, 2020 at 7:51 pm #1366228David
Back looking at this now.
I modified your code (below) as a start to see how it looks, but nothing shows!
So i went back to my simple test – just the word ‘test’ in a h2 header and nothing appears now!
Not sure what has changed!
The site is:
Below is my modified code:
<div class="custom-menu-bar"> <span class="custom-item"><a href="https://thebeautecollective.com.au/"><img src="https://thebeautecollective.com.au/wp-content/uploads/2020/07/Dusty-Pink-HH-2.png"></a></span> <span class="custom-item"><a href="#"><img src="https://thebeautecollective.com.au/wp-content/uploads/2020/07/phone-5.png"></a></span> <span class="custom-item"><a href="#"><img src="https://thebeautecollective.com.au/wp-content/uploads/2020/07/Email-28.png"></a></span> </div>
Thanks, Dave (just the word test in H2 is there now)July 17, 2020 at 2:19 am #1366468DavidStaffCustomer SupportJuly 17, 2020 at 2:44 am #1366495David
Thanks David, I will double check, but I thought so!
I just checked and I did nothing, but just resaved it and now my H2 test is working.
I replaced your code, some major changes to layout required now!
I’ll see how I go
Thanks, DaveJuly 18, 2020 at 2:56 am #1367499DavidStaffCustomer Support
Instead of adding the logo image in the custom menu bar – i would add it to the Customizer > Layout > Header –> Mobile Header > Logo.
The two icon images are slightly different sizes – best if those were the same. Happy to look at what CSS is required after making those changes.July 18, 2020 at 3:37 am #1367522David
Awesome, thanks so much – I’ll be working on this on Sunday…
DaveJuly 21, 2020 at 7:53 pm #1371570David
Back to this now!
I have made the two icons the same, and turned the logo back on.
So my two icons appear.
I need the order to be logo (left aligned)
two icons and mobile header – right aligned in that order
Hope that is doable ?
(I tried adding display: inline-block to the outer div after doing some research, but no change!)
Thanks again for your help
I have turned on the element for just the page /test
https://thebeautecollective.com.au/test/July 22, 2020 at 1:09 am #1371775DavidStaffCustomer SupportJuly 22, 2020 at 1:30 am #1371796David
I just applied that, and it looks great – thanks so much…
I may also need to add it to the desktop header too – but I’ll get back if that is needed.
Best regards, DaveJuly 22, 2020 at 2:56 am #1371862
- You must be logged in to reply to this topic.