Mobile Menu

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!

#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)

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. 

share site url pls?

Hello Mandeep,

Website URL is: https://www.valleydental.au/

Thanks!

@mandeep @tuanphan

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>

@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? 

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?