You have a ton of options for customizing the look of your mobile menu built right into Squarespace. This video will show you how to access these settings and how to customize your menu so it suits your site style.
—
Free training – learn how to use CSS in Squarespace like a pro: https://insidethesquare.co/learn
—
In this tutorial, you’ll learn how to change the layout, colors, alignment, and icons in the mobile menu of your Squarespace website. You’ll also learn about some custom code you can use to change the color of the social media icons and the size of the button.
Change the font size 16px in the code below to update the button on your mobile menu:
.header–menu-open .header-menu-cta a { font-size: 16px!important}
Change the font family of the links in your mobile menu:
.header–menu-open a {font-family: serif!important}
Change the word “red” in the code below to what color you want those icons to be!
.header-menu-actions .icon svg {fill: red}
To learn more about the types of colors you can use in code, check out this article: https://insidethesquare.co/colors
—
Related Videos
Custom mobile menu icon image: https://youtu.be/Ns1x8rJf8sw
Mobile menu background image: https://www.youtube.com/watch?v=QhW5ourliWY
—
🥳 Ready to build a site with Squarespace ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10 ❤️
—
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
—
🤩 Download over 60+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 https://insidethesquare.co/css
—
The term “Squarespace” is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
