[Support request] Element help for mobile menu & laptop screens

[Laura]

Hi,

I’m using elements but I’ve got a little bit stuck.

On desktop, a little bit of text is displayed with a button above the menu.

On a mobile device, two call-to-action buttons appear stacked instead.

I’d like to be able to include a couple of buttons next to the mobile menu button between 1200px (my mobile menu breakpoint) and the mobile element appearing. (At the moment there is no quick way for a user to book an appointment or see where the store is if they’re on a small laptop).

Could you recommend what hook I should use?

Thanks
Laura

[David]

Hi there,

so you have a block element to hook in your CTA mobile buttons.
Edit that and:

1. set the Hook to menu_bar_items
2. select the Parent Container Block and:
2.1 Set it to Display on ALL Device sizes
2.2 Give it an Advanced > Additional CSS Class of your choosing eg. menu-bar-cta. We’ll use it on some CSS below.
3. Set the buttons block to only stack on Mobile.
4. Publish those changes.

5. Add this CSS to remove the menu-bar-cta on screens over 1200px.

@media(min-width: 1201px) {
   .menu-bar-cta {
       display: none !important;
   } 
}

Might require some tweaking of the button styles for larger screen sizes.

Once thats in place – let me know as it will require some CSS to move the buttons below on mobile

[Author]

Posts