How to customise your navigation folder items with copy and paste css

SQAURESPACE

9 Feb

Customising your site is a great way to add a bit of character, but unfortunately Squarespace doesn't allow for much customisation on your main navigation, especially when you have a folder with drop down pages.

Fear not with a few lines of code you'll be able to make your navigation as unique as your brand.

Where to paste your code into Squarespace:

You'll find your CSS dashboard in the pages section on your site, scroll down to the bottom and you'll see Website tools. Click on that and you'll see custom CSS, open that and pasted following codes to make the changes. EASY!

1: Adding a solid Shadow box to your folder dropdown for your Squarespace Menu Navigation

How to customise your navigation folder items with copy and paste css

This is a very effective way to draw attention to your folders content. You can customise a lot of elements on here. To start all you need to do is copy the code into the CSS dashboard.

To customise to your brand colours change the hex colors (#) on background and color. You can also play around with the px values to change the padding of the border.

// NAVIGATION FOLDER - SOLID SHADOW FOLDER //

.header-nav-folder-content {
  background: #fff !important;
  border: 1px solid #000 !important;
  border-radius: 10px !important;
  box-shadow: 5px 5px #000 !important;
  padding: 10px !important;
}

// NAVIGATION FOLDER - LINK COLOR - GHOST PLUGINS //

.header-nav-folder-item a {
  color: #000 !important;
  padding: 10px !important;
}

2: Adding a folder indicator arrow to folder dropdown for your Squarespace Menu Navigation

Sometimes all you need is a little indicator to show that there is content in your folder. This cute little arrow icon does just that.

Add the additional code below to change the folder colour if needed, just change the # number.

// Folder Indicator Arrow - Nav //

a.header-nav-folder-title:after {

content: "▾";

}

// Change Folder Color //

.header-nav-folder-content {

background: #FFCF5A !important;}

3: Adding a divider line to folder content for your Squarespace Menu Navigation

If you're like me and a little bit in love with adding lines as dividers this one's for you. Just add the code below to add a divider line between your pages in your folder. I think it makes it look a little, neater what do you think?

To customise to your brand colours change the hex colors (#) on background and color. You can also play around with the px values to change the padding of the border.

// Divider Lines Between Folder Links  //

.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item { 
  padding: 15px 0px; 
  border-bottom: 1px solid #000; 
} 

.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item:last-child { 
  border-bottom: none !important;
}

Hey I’m Nisha, a 10 year Squarespace Certified Expert. I build highly engaging and swoon worthy websites for Creatives, Coaches and Female Business Owners.

Click explore if you want to know more about how I can help you launch your dream website in just 2 weeks!

Tell me how