Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 https://insidethesquare.co/learn
—
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10
—
💕 Love this free Square space tutorial? You can donate via Paypal to help support my YouTube Channel https://www.paypal.com/paypalme/insidethesquare
—
This tutorial is for Squarespace 7.1 sites, not 7.0 sites like Brine or Bedford.
If you have no idea what that means, read up on what version you are using in this article, because it makes a big difference in which codes will work for you! https://insidethesquare.co/theme-families
—
In this tutorial I am going to show you some creative codes you can use to change the look of your drop down folder menu in your Squarespace 7.1 website.
The codes from this tutorial are below but a few important things to note:
This is for 7.1 sites, not verison 7! If you are on a brine site, try this tutorial instead:
There is more than one way to code a site, this is just my version 🙂
CSS changes the look of a site but not the way it works. This code won’t “break” your site, and if you don’t like the look of it, just delete it and everything will go back to normal.
This is a super customizable code. To learn more about color options, check out this article:
If you are brand new to CSS, start with my **free** intro course at https://insidethesquare.co/learn-css
▸▸▸Here is the code to change the background color; be sure to change the background color #00FF00 to the color you want to show up behind your menu links:
.header-nav-folder-content{background-color:#00FF00!important}
▸▸▸ Give the drop down a gradient background:
.header-nav-folder-content{background:linear-gradient(to bottom, #fee7ef,#c4e9fa) }
▸▸▸ Round the edges of the dropdown:
.header-nav-folder-content{border-radius:15px}
▸▸▸ Change the link alignment to the left:
.header-nav-folder-content{text-align:left!important;}
▸▸▸ Change the link alignment to the right:
.header-nav-folder-content{text-align:right!important;}
▸▸▸ Change the link alignment to the center:
.header-nav-folder-content{text-align:center!important;}
▸▸▸ Give your menu a border:
.header-nav-folder-content{border: 1px solid purple}
▸▸▸ Add a border between links:
.header-nav-folder-content a {border-bottom:1px solid #333}
▸▸▸ Increase the space between links:
.header-nav-folder-content a {padding-bottom:.5rem!important; }
▸▸▸ aaaaaand last but not least, give that fancy little drop down a shadow with this code:
.header-nav-folder-content{box-shadow: 5px 5px 15px rgba(0,0,0,0.25)}
▸▸▸ Ready for more copy+paste codes?
The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you’re ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy at https://InsideTheSquare.co/css
—
The term “Squarespace” is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥
—
#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #anchorlinks #squarespacetips
