Buy me a coffee

Squarespace: Dropdown Menu Code

These code for Squarespace 7.1.

Add code to Design > Custom CSS

How to change Dropdown Menu Width

/* dropdown menu width */
.header-nav-folder-content {
    width: 500px !important;

To change specific dropdown, use this code

div.header-nav-item:nth-child(1) .header-nav-folder-content {
    width: 400px !important;


1 here is the ordinal number of the Dropdown Title (Folder Title). Count from left to right.


Add an Arrow After Dropdown Title

/* Dropdown title arrow */
a.header-nav-folder-title:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    position: relative;
    top: 2px;


Center Dropdown Menu under Title

/* Center dropdown */
.header-nav-folder-content {
    background-color: green !important;
    left: 50% !important;
    transform: TranslateX(-50%);


Dropdown Menu Transparent

div.header-nav-folder-content {
    background-color: transparent !important;

Dropdown Menu 2 Columns

div.header-nav-folder-content {
    column-count: 2;

to make 3, 4, 5 columns… just change number 2 to 3, 4 or 5


Horizontal Dropdown Menu

/* Nav dropdown */
.header-nav-folder-content {
    width: 100% !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    left: 50% !important;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
.header-nav-folder-content div {
    margin-right: 20px;
.header-nav .header-nav-item--folder {
    position: static;


Change Folder/Dropdown Title Text to Burger Icon

a.header-nav-folder-title:after {
    font-size: 12px;
    content: "\e030";
    font-family: 'squarespace-ui-font';
    font-size: 50px;
a.header-nav-folder-title {
    font-size: 0;


Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to:
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder