How to edit the mobile folder icon in Squarespace

Squarespace makes it easy to create beautiful and functional websites, but sometimes you want to customize things a bit further. Your Squarespace website is a masterpiece, but the default mobile folder icons feel…uninspired. Fear not, design-savvy friend! This guide will show you how to edit the mobile folder icon in Squarespace & customize those little arrows and elevate your mobile menu with a splash of personality.

Version Check: Before diving in, identify your Squarespace version. Is it the sleek and modern 7.1, or the classic charm of 7? Knowing this will ensure you grab the right code for optimal customization.

Ready to breathe life into those default folder icons on your Squarespace mobile menu? Let’s start!

How to edit the mobile folder icon in Squarespace

Version 7.1:

1. Log in to your Squarespace account.
2. Navigate to Website>Website Tools>Custom CSS.
3. Paste this code, replacing “your_desired_color” with your chosen HEX code or color name:

   .chevron {
     border-color: **your_desired_color**!important;
   }

Brine Theme in Version 7:

1. Navigate to Design > Custom CSS.
2. Use these codes for folder and back arrows, respectively:

   .Mobile-overlay-nav-item--folder:after {
     color: **your_desired_color**!important;
   }
   
   .Mobile-overlay-folder-item--toggle:before {
     color: **your_desired_color**!important;
   }
   

If you’re using the Brine theme in version 7, these codes handle your color cravings.

Swap “your_desired_color” with your chosen shade, and witness the transformation!

Feeling adventurous beyond Colors?

Ditch the arrows altogether and embrace the power of Unicode characters. These symbols can be anything from arrows in funky styles to charming icons. Choose your favorites from a website like unicode-search.com.

Version 7.1 Twists:

To replace arrows with Unicode in 7.1, follow these steps:

Copy this code snippet and paste it into your custom CSS:

.chevron {
  border-color: transparent;
  transform: rotate(0deg)!important;
  margin-top: -1.25rem!important;
}

Choose your Unicode characters. For example, “→” for right arrow and “←” for left arrow.

Insert your chosen characters into the code:

.chevron--right:after {
  content: "→";
  color: **your_desired_color**!important;
}

.chevron--left:before {
  content: "←";
  color: **your_desired_color**!important;
}

Replace “your_desired_color” with your preferred hues.

Brine Magic:

For Brine in version 7, use this code to embrace Unicode:

.Mobile-overlay-nav-item--folder:after {
  content: "**your_chosen_unicode_character**";
  color: **your_desired_color**!important;
}

.Mobile-overlay-folder-item--toggle:before {
  content: "**your_chosen_unicode_character**";
  color: **your_desired_color**!important;
}

Remember to replace “your_chosen_unicode_character” with your desired symbol and “your_desired_color” with your color pick.

Pro Tip: Save these code snippets for future reference, and experiment with different colors and characters to find the perfect combination for your mobile menu.

With these tricks in your pocket, you can transform those mundane folder icons into eye-catching elements that reflect your brand personality and enhance your Squarespace mobile experience. So go forth, customize, and make your mobile menu a masterpiece!

P.S. Don’t forget to back up your code before making any changes, just in case a gremlin decides to visit your CSS files.

 

✨ Experiment and Enjoy!

Don’t be afraid to play with different colors, Unicode characters, and even font styles to create a mobile menu that perfectly reflects your brand’s unique vibe. Remember to save your code snippets for future reference and always back up your CSS files before making changes. Happy customizing!

How to use a summary block in Squarespace

How to Make an Email Link Clickable Squarespace

FAQs

How do I choose Unicode characters?

Explore websites like unicode-search.net or copy them from other websites.

Can I change the font size or style of the icons?

Yes, you can use additional CSS properties like font-size and font-family.

Will these changes affect my desktop menu?

No, these customizations only apply to the mobile menu.

Is there a risk of breaking my website?

Always back up your Custom CSS before making any changes. If you encounter issues, you can revert to the backup. For complex customizations, consider consulting a Squarespace developer.

Can I add gradients or shadows to the icons?

Yes, you can use additional CSS properties like background-image and box-shadow to achieve those effects.

How do I choose the right color for the icons?

Consider your brand colors, website theme, and overall visual hierarchy. Aim for a color that complements your design and enhances user experience.

Where can I find more Unicode characters to use?

Websites like unicode-search.net or Emojipedia offer extensive lists of symbols and icons. You can also explore design resources for inspiration.

Can I use emojis instead of arrows?

Absolutely! Choose emojis that resonate with your brand and menu structure. Just ensure they’re clear and understandable on small screens.