- This topic has 1 reply, 2 voices, and was last updated 3 years, 4 months ago by
.
-
Posts
-
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
LauraCustomer Support
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-ctaon 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
- You must be logged in to reply to this topic.
