[Resolved] Add element using menu_bar_items hook below menu in Off Canvas Panel

[Brenden]

I have a button in an Element that displays using the hook menu_bar_items. It looks great on desktop (https://share.getcloudapp.com/nOubrmGB). The problem is on mobile (https://share.getcloudapp.com/OAuj1rOE). On mobile, I would like to remove the button from the header and show it below the menu in the Off Canvas Panel (https://share.getcloudapp.com/NQujmZbA).

What is the best way to solve this problem?

[Ying]

Hi Brenden,

Can you link us to your site so we can see your the settings for the header/navigation area?

[Brenden]

https://hodgesjewelers.wpengine.com/

[Ying]

Based on your structure, the simplest solution would be:

1. Add hide-on-mobile hide-on-tablet class to the buttonsblock, so it hides on mobile.

2. Create another block element with this button, use the after_slideout_navigation hook, add hide-on-desktop class to the buttonsblock.

[Brenden]

That works!

Is there a better way to structure this type of functionality?

[Ying]

Well, if I were you, I would add the contact button as a menu items, then use CSS to position and style it.

But it requires CSS skills, it’s easier to use the method I provided previously if you are not familiar with CSS 🙂

[Brenden]

That makes a lot more sense. I like that solution. Thank you for explaining!

[Ying]

No problem 🙂

[Author]

Posts