Mobile Menu/Header question

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.

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

You're welcome

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

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.

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)

I am not seeing anything in the Mobile Header now
Is the Hook you added still published and have correct display rules ?

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

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.

Awesome, thanks so much - I'll be working on this on Sunday...
Dave

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/

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;
}

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

Glad to be of help :)