Squarespace Hack Use Your Own Image for Mobile Menu Icon Beginner Tutorial

>> YOUR LINK HERE: ___ http://youtube.com/watch?v=sDD7oX7jH2w

In this tutorial, you'll learn how to swap out the default mobile menu icon for your very own custom image - no design degree required! • Whether you're rocking a square logo or a funky rectangular design, I've got you covered with step-by-step instructions. • Plus, I'll show you a nifty trick to keep that crucial 'close menu' functionality. Perfect for beginners looking to add a professional polish to their site. • You'll find the codes related resources below, but the image you use for your mobile menu icon will make a difference in the code you'll need. Make sure you watch the tutorial so you know which code to use and how to customize it! • 🔗 Related content Links: • Original Blog Post: https://tutorials.squarespace.com/cod... • Basic CSS for Squarespace - save 10% with promo code YOUTUBE: https://insidethesquare.co/learn • Member Login Button Tutorial: https://insidethesquare.co/squarespac... • Squarespace CSS Code Collection: https://insidethesquare.co/css • Subscribe to my channel for new Squarespace videos every week: / @insidethesquare • ⏱️ Important Timestamps: • 0:00 - Introduction and overview • 0:32 - Accessing Custom CSS in Squarespace • 0:52 - Uploading custom image to Squarespace • 1:10 - Hiding the default icon with CSS • 1:29 - Adding your custom image as the menu icon • 2:07 - Maintaining the 'close' functionality • 2:50 - Adjusting code for non-square images • 4:29 - Wrap-up and additional resources • 🖥 Tutorial Code • /* Mobile Menu Code from Insidethesquare - Square Image */ • .burger-inner{ • opacity: 0 • } • .burger-box{ • background-image: url(image-url-here); • background-size: cover; • } • .burger--active .burger-box { • background-image: none!important • } • .burger--active .burger-inner { • opacity: 1 • } • /* Mobile Menu Code from Insidethesquare - Rectangle Image */ • .burger-inner{ • opacity: 0 • } • .burger-box{ • background-image: url(image-url-here); • background-size: contain; • background-repeat: no-repeat; • background-position: center; • } • .burger--active .burger-box { • background-image: none!important • } • .burger--active .burger-inner { • opacity: 1 • } • - - • Need help with customizing your site? Here are my current support options: https://www.insidethesquare.co/code-help • - - • The term Squarespace is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace Inc. The accuracy of this information is subject to change. #SquarespaceCustomization #WebDesignTips #CSSforBeginners #squarespacetutorial #SquarespaceCSS

#############################

New on site