The question is answered, right answer was accepted
Mercer : How to reduce the size of the main navigation hamburger menu ?
Mercer : How to reduce the size of the main navigation hamburger menu ?
After I click the hamburger menu it opens up and covers the entire page. I'm looking to make this smaller. Ideal size would be wherever the contents of the menu end.
@ruchitkapoor: The hamburger menu is designed for mobile, where you'd want it to cover the page. If you want to customise yours for desktop, you'll want to provide us with a link to it.
@Paul2009 :- Thanks for your prompt response Paul. my website's url is www.thepinkchampa.com.
There are some amazing cushions on this site!
To make the menu smaller on desktop computers, try adding this to Design > Custom CSS. You can adjust the width (344 pixels) to suit your needs.
@media screen and (max-device-width: 640px) {
.Mobile-overlay-menu {
width: 344px;
}
}
I hope that helps you.
Paul
I post free answers because I want to help other Squarespace users. In return please Accept an answer if it is correct. If it didn't help, feel free to ask for more help or wait for others to add their comments.
To everyone! If you find this (or any) answer helpful, please vote it up using the up arrow. This will let other users know it's a good answer.
@Paul2009 Hell yeah, it worked ! Thanks a tonne Paul. and thank you for the compliment on the cushions. I'm the Photographer and designing this website for my client.
You're welcome. They certainly look great in the photos. It's a great use of the image-change-on-hover on the products page.
Hello! I have attempted this using the above code -- and am getting no results. What am I doing wrong?
Thanks in advance, Chelsea
If you're using it with Mercer, please provide a site URL.
Hi Paul,
Thanks — bighq.ca
Currently have the mobile breakpoint set to 800 px. Would like to set it so the hamburger icon is always active - on desktop... however... I need to adjust the size of the open menu so it does not cover the entire page.
@paul2009 Sorry Paul! I removed it... was adding something else and took it out... It's there now.
@paul2009 Sorry Paul! I removed it... was adding something else and took it out... It's there now.
OK, try this for your site instead of the answer above:
.Mobile-overlay {
width: 344px;
}
