How to use a custom logo for your mobile menu
Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content
About this tutorial
This tutorial was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
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. ✨
In this video, you'll learn:
How to avoid the "vanishing logo" curse on mobile menus.
Zero design skills needed! Master the power of CSS with easy-to-follow steps.
Double the impact: Craft unique logos that reflect your brand personality on both desktop and mobile.
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: insidethesquare.co/learn
Video tutorial
Code Example
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.<style>
.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;
}
