Dropdown Arrow CSS

#1. Add Dropdown to Folder Dropdown Title

Use this code to Custom CSS box

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

Result:

#2. Each dropdown arrow will have a different color

Use this CSS code

/* dropdown arrow */
a.header-nav-folder-title:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    position: relative;
    top: 2px;
}
div.header-nav-item:nth-child(1) a.header-nav-folder-title:after {
    color: #f1f;
}
div.header-nav-item:nth-child(2) a.header-nav-folder-title:after {
    color: #fff;
}
div.header-nav-item:nth-child(7) a.header-nav-folder-title:after {
    color: #000;
}
div.header-nav-item:nth-child(8) a.header-nav-folder-title:after {
    color: red;
}
div.header-nav-item:nth-child(9) a.header-nav-folder-title:after {
    color: green;
}

Result:

#3. Arrow on Desktop Only

Use this code to Custom CSS box

/* dropdown arrow */
a.header-nav-folder-title:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    position: relative;
    top: 2px;
}
div.header-menu-nav-item span.chevron.chevron--right {
    display: none !important;
}

#4. Change Dropdown arrow to Down Arrow on Hover

Use this code to Custom CSS box

/* dropdown arrow */
a.header-nav-folder-title:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    position: relative;
    top: 2px;
    display: inline-block;
}
a.header-nav-folder-title:hover:after {
    transform: rotate(180deg);
}