How to use an alternative logo for your mobile menu // Custom Mobile Menu Logo in Squarespace

Ever feel like your website logo disappears on mobile? It blends into the dark menu background, leaving your brand invisible on smaller screens. But fear not, Squarespace ninjas! This video unlocks the secret power of custom CSS to display different logo when your mobile menu is open. Imagine a sleek logo for desktop and a bolder, brighter one for mobile, each perfectly optimized for different viewing experiences. ✨ No more blending in! Unlock the mobile logo magic and make your brand shine on every screen. - - - If this is your first time using CSS for Squarespace awesome! I have a lot more to teach you - check out my free class on basic CSS for Squarespace here: - - - Here are the steps for this tutorial, along with the code used in the video: First, you’ll need to upload the image. Click on Website, then Website Tools, then custom CSS. Click on Custom Files & upload your alternative logo image file here. Paste the code below into your Custom CSS. Click on the image to replace the placeholder text with the URL for your image. .header--menu-open .header-mobile-logo img{ opacity: 0 } .header--menu-open .header-mobile-logo { background-image:url(’image-url-here’); background-size: contain!important; background-repeat: no-repeat!important; } - - - ❤️ Like this tutorial? Buy me a coffee to say thanks! ☕ - - - 📑 Get access to my collection of CSS codes for Squarespace at - - - 🙋 Need some help? Visit ​​ to see my current support options. - - - 💻 WEBSITE → 📧 NEWSLETTER → 🤳 INSTAGRAM → 📌 PINTEREST → - - - 💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code INSIDE10 - You’ll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎 🔗 INSIDE10 → - - - 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 ♥