InsideTheSquare.co

View Original

How to use a custom logo for your mobile menu

See this content in the original post

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

See this content in the original post
See this content in the original post
  1. First, you’ll need to upload the image.

  2. Click on Website, then Website Tools, then custom CSS.

  3. Click on Custom Files & upload your alternative logo image file here.

  4. Paste the code below into your Custom CSS.

  5. 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;
}

See this content in the original post

⭐️ Free Class on CSS for Squarespace

📱Creating custom codes for mobile screens