Mobile Menu/Header question

[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, Dave

https://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.

[David]

Hi 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/

[David]

Thanks David,
I’ll give that a shot!
Dave

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

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.au

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)

[David]

I 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/

[David]

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, Dave

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

Awesome, thanks so much – I’ll be working on this on Sunday…
Dave

[David]

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 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/

[David]

Try 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/

[David]

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, Dave

[David]

Glad to be of help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts