Using a folder to create a dropdown menu in Squarespace is a great way to organize your contentโฆ but the style options are a little lacking. In this tutorial, weโll turn that menu into a full-width second-level navigation, hover effects and all.๐
โ
This is just the start of all the cool things you can do with custom CSS! Learn the basics in my free class: https://insidethesquare.co/learn
โ
IN this tutorial, weโll take the content of your drop-down menu and move it to display the full width of the screen but only on a desktop. There are a few parts of this code that you will want to update for your own site, like the background color, border, and hover effect.
โ โ โ
Here is the code from this tutorial:
.header-nav .header-nav-itemโfolder .header-nav-folder-content{
width: 100vw!important;
position:fixed;
background: #e5f5f6!important;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.header-nav-folder-content{
display: flex;
justify-content: center;
}
.header-nav-folder-item {
margin-left: 1rem;
margin-right: 1rem
}
.header-nav-folder-content a:hover {
font-weight:bold
}
โ โ โ
๐ RELATED VIDEOS ๐
How To Change the Dropdown Menu In Squarespace 7.1: https://youtu.be/8Beqlp8W8wM
How To Style The Dropdown Folder Menu In Squarespace โ Brine Sites: https://youtu.be/wpsDJ4A2vOw
โ โ โ
๐ธ GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE ๐ธ
Use my affiliate link and code PARTNER10 โ Youโll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way ๐
๐ PARTNER10 โ https://insidethesquare.co/partner10
โ โ โ
๐คฉ Download over 60+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at ๐ https://insidethesquare.co/css
โ
๐ Need some help? Visit โhttps://insidethesquare.co/code-helpโ to see my current support options.
โ
๐ฅฐ SUPPORT MY CHANNEL โ https://paypal.me/insidethesquare
๐ป WEBSITE โ https://insidethesquare.co
๐ง NEWSLETTER โ https://insidethesquare.co/email
๐คณ INSTAGRAM โ https://www.instagram.com/thinkinsidethesquare
๐ FACEBOOK โ https://business.facebook.com/insidethesquare
๐ PINTEREST โ https://www.pinterest.com/insidethesquare
โ
The term โSquarespaceโ is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform โฅ
