1. Add this code to CSS

Paste the code: Paste the provided CSS code into the Custom CSS block.


// WWW.SQUARESPELL.CO.UK //
.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item:nth-child(1) a::before,
.header-menu-nav-item a[href="/"]::before {
content: '';
  height: 20px;
  width: 20px;
  margin-right: 15px;
  margin-left: -25px;
  background: url('YOUR-ICON-HERE');
  background-size: contain;
  background-repeat: no-repeat;
vertical-align: -4px;
display: inline-block;
}

/////////////

@media screen and (max-width: 640px) {
  .header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item:nth-child(1) a::before,
  .header-menu-nav-item a[href="/"]::before {
    display: none;
  }
}

// WWW.SQUARESPELL.CO.UK //

Multiple Icons to Dropdown Folders in Squarespace

Targeting Specific Dropdown Items: The nth-child(n) selector allows you to target specific items within a dropdown folder. In this code, nth-child(1) targets the first item. To apply different icons to other items, simply duplicate the CSS block and change the nth-child number (e.g., nth-child(2) for the second item, nth-child(3) for the third item, etc.).
Custom Icon Insertion: The background: url('YOUR-ICON-HERE') line is where you insert the URL of your custom icon. Replace 'YOUR-ICON-HERE' with the actual URL of the icon you want to use for each specific dropdown item.
Icon Size and Positioning: The height, width, margin-right, margin-left, and vertical-align properties control the size and placement of the icon relative to the menu text. You can adjust these values to customize the appearance of each icon.

To apply this code to your Squarespace site, simply follow the steps provided. If you encounter any issues or need further assistance, feel free to reach out to us—we’re here to help!

CONTACT US →

Featured