[Resolved] Navigation button in mobile menu with hooks

[Rachel]

Hello David,

thanks for your help yesterday with the Generateblocks button on the right.

I need that the button also appears in the mobile menu.

I have chosen the generate-inside-mobile-menu hook but it doesnt show up. Could you please help me with that?

https://www.periodwhisperer.com/

Thank you.

[David]

Hi there,

ok you can use this new Hook we added to 3.0:

generate_menu_bar_items

Simply change the hook you used for the desktop button to that hook – it will then display in Mobile and Desktop. May need a little CSS to tweak.

Let mw know.

[Rachel]

That’s cool, it works but how do I get it in the mobile menu? What css could I use?

[David]

Aaah – do you want it inside the Off Canvas Navigation?

If so then reverse that last change so its back to desktop only.
Then create a duplicate Block Element and choose the generate_after_slideout_navigation hook

[Rachel]

Ah, thanks will try it although I like the button in the middle as well. I need to think about it. If I want to centre it with the first proposal could you give me the css code, please?

[David]

Of course – you can add this CSS to align the button on mobile:

#mobile-header .menu-bar-items {
    margin-right: auto;
}

If you’re keeping the Hamburger Menu Label then you can add this CSS:

.mobile-header-navigation .site-logo {
    min-width: 115px;
}

This will help center the button by making the logo container the same width as the Hamburger and its label.

[Rachel]

Thank you David you are amazing.

[David]

Glad to be of help.

[Author]

Posts