Jump to content

Mobile Menu

Recommended Posts

Hello,

I want to make some adjustments to my site's mobile menu; however, I noticed there are limited options for this. 

1. The text size for the sub 'Treatments' menu is unusually large, is it possible to reduce the text size?

2. I would like to remove the phone number and add a 'CALL US' CTA at the bottom of the menu next to 'BOOK ONLINE'

3. Add some information below 'CONTACT' with our business hours or address. 

Thank you in advance!

IMG_4817.PNG

IMG_4818.jpg

Link to comment
  • Replies 8
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

#1. Add this to Website Tools (under Not Linked) > Custom CSS

/* Mobile menu items size */
.container.header-menu-nav-item * {
    font-size: 18px !important;
}

#2. Click Call Us >> Open a new page or open call app?

#3. You can let me know which exact info you will add there, then we can give exact code easier. (this will require custom code, no default way to add text)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hi Tuanphan,

Thanks for this!

#1 - Thank you, this works pretty well. Is there a way to align the menu items to the top of the page now. As the text has been reduced it sits in the centre. Screenshot attached.

#2 - Open to call app please 

#3 - Love to add the business hours if possible (provided it aligns neatly and is spaced well)

Appreciate your assistance. 

IMG_CF79E13AF274-1.jpeg

Link to comment

Use this CSS to align text to top

.header-menu-nav-folder-content {
    justify-content: flex-start;
}

Use this jQuery code to add second button + info (add to last line of Website Tools > Code Injection > Footer)

<script>
  $(document).ready(function() { 
		$('<a class="btn btn--border theme-btn--primary-inverse call-app" href="tel:(07)32542810">Katey</a>').appendTo('.header-menu-cta');
    $('<p class="header-custom-text">Enter your info here</p>').appendTo('.header-menu-cta');
	});
</script>

image.png.d0aa59bfe720e0b20b260a5c62f97322.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 10/23/2023 at 11:51 AM, Katey001 said:

@tuanphan Thank you very much, you have been very helpful! Is there a way to edit the code so that the button appears the same as the 'Book Online' button. Same text and rounded edges? 

I see you figured it out with some CSS code?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.