[Share] Dropdown Arrow CSS

Some CSS code for Dropdown Arrow.

You can add code to Website Tools > Custom CSS.

If code doesn't work, you can share site url, I will check again.

#1. Add Dropdown to Folder Dropdown Title

/* 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

/* 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;
}

#3. Arrow on Desktop Only

/* 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

/* 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);
}