How To Create A Full-Width Dropdown Menu in Squarespace

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

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. 😉

The code from this tutorial is below. The parts in bold are the parts that you will probably want to change to match the look of your own website!

---

Here is the code:

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

Here are some other ideas for hover effects that you can try!

.header-nav-folder-content a:hover {<br>

background-color:#FFF!important;<br>

color:#333!important;<br>

}

.header-nav-folder-content a:hover {<br>

text-decoration:underline!important;<br>

}