Archived topic
Add element using menu_bar_items hook below menu in Off Canvas Panel
7 replies · Started by Brenden on October 25, 2022
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?
Hi Brenden,
Can you link us to your site so we can see your the settings for the header/navigation area?
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.
That works!
Is there a better way to structure this type of functionality?
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 :)
That makes a lot more sense. I like that solution. Thank you for explaining!
No problem :)
