How to edit the mobile folder icon in Squarespace
This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes
This tutorial will show you how to use custom CSS in Squarespace to change the color of the folder arrows on your mobile menu, and how to change it to something completely different!
A few important things to note before you copy and paste this into your own site:
There are two tutorials below; one for Brine and one for 7.1 sites. Make sure you are using the right tutorial for your version and theme! If you have no clue what that means, check out my beginners guide to CSS for more info on why it is SUPER important info to know before you start playing with code, and how to find out which one you are using. Grab a copy for free at insidethesquare.co/learn
If you want to replace the arrow with something different, I recommend using a Unicode character. if you want to replace the arrow in your menu. You can find a big ol’ list of them on my site at insidethesquare.co/unicode
Version 7.1 Code Instructions
Use this code to change the color and the width of both the right arrow for opening the folder and the left arrow for navigating back
.chevron{
border-color:purple;
border-width: 5px
}
To change just the left arrow, use the code name .chevron--left and to change the right arrow, you guessed it! Use the code name .chevron--right
Want to change it to something completely different?
Follow the steps below to hide the current arrows, and add a Unicode character in its place.
Check out my list of Unicode characters here.
Also, you replace the colors purple and green in the code below with the colors you want to see, or remove that part of the code to keep the new characters in the same color as the links in your mobile menu.
.chevron { border-color:transparent; transform:rotate(0deg)!important; margin-top:-1.25rem!important}
.chevron--right:after {content:"→"; color: purple}
.chevron--left:before {content:"←"; color: green}
.chevron--left {margin-right: 1rem}
Brine Theme in Version 7 Code Instructions
Use this code to change the color of the folder arrow, change the word purple in this code to the color you want to see:
.Mobile-overlay-nav-item--folder:after{color:purple}
Use this code to change the color of the arrow that points back to the main menu, change the word green in this code to the color you want to see:
.Mobile-overlay-folder-item--toggle:before{color:green}
Want to change it to something completely different?
Update the character inside the quotation marks in this code to the unicode character you want to use.
Check out my list of Unicode characters here.
Also, you replace the colors purple and green in the code below with the colors you want to see, or remove that part of the code to keep the new characters in the same color as the links in your mobile menu.
.Mobile-overlay-nav-item--folder:after {content:"→"; color: purple}
.Mobile-overlay-folder-item--toggle:before {content:"←"; color: green}
