- This topic has 14 replies, 2 voices, and was last updated 6 months ago by
David.
-
AuthorPosts
-
July 14, 2020 at 4:41 am #1362960
David
Hi everyone,
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 ?
TIA, Davehttps://www.oswaldhomes.com.au/
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 #1363116David
StaffCustomer SupportHi there,
If the site is using the Mobile Header you can use a Hook Element to you own content using the
inside_mobile_header
hook.https://docs.generatepress.com/article/hooks-element-overview/
It may require some CSS to position it. Happy to help with that.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 14, 2020 at 3:31 pm #1363666David
Thanks David,
I’ll give that a shot!
DaveJuly 14, 2020 at 4:21 pm #1363693David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 15, 2020 at 4:18 pm #1364986David
Hi David,
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, Dave
July 16, 2020 at 3:35 am #1365344David
StaffCustomer SupportSome 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 16, 2020 at 7:51 pm #1366228David
Hi David,
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:
https://thebeautecollective.com.auBelow 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 #1366468David
StaffCustomer SupportI am not seeing anything in the Mobile Header now
Is the Hook you added still published and have correct display rules ?Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 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 #1367499David
StaffCustomer SupportInstead 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/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
Hi David,
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 orderHope 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 #1371775David
StaffCustomer SupportTry adding this CSS now:
.site-logo.mobile-header-logo { order: -1; } .custom-menu-bar { display: flex; align-items: center; } .custom-menu-bar .custom-item { margin: 0 10px; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 22, 2020 at 1:30 am #1371796David
Thanks David,
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 #1371862David
StaffCustomer SupportGlad to be of help 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.