Jump to content

Styling Navigation Menu Folders/Dropdown with Multiple Folders

Recommended Posts

Site URL: https://www.waterloogin.com/

Hi - 


I have applied css tweaks to a dropdown folder in my navigation in a Squarespace 7 template.  Now I would like to add a second folder in my navigation but have those css tweaks only apply to ONE folder (it will be the last/ 2nd one) and not applied globally. 


Here are the tweaks I have applied to my existing folder:

.Header-nav-folder-item:nth-child(1){display: none;}    ---> to hide the first link in the folder so it clicks through to a separate landing page

.Header-nav-folder-title {
padding: 10px 20px !important;
border: 2px solid #fff !important;
}    ----> to add border around the folder 


I have tried using .Header-nav-item .Header-nav-item-folder:nth-child(2) before the code above to attempt to target only the second folder but it didn't work. For now, only the one folder is live on the site until I can figure out a solution. 


Greatly appreciate any and all advice. 

Link to comment
  • Replies 3
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

I was able to figure it out thanks!


For these particular tweaks I replaced css with this JQuery  for the click-able folder:  https://www.adlyticmarketing.com/blog/squarespace-redirect-a-folder-click-in-navigation-menu


And then this code to put a border around only the last folder: 


.Header-nav.Header-nav--primary span.Header-nav-item:last-of-type {
border: 2px solid #fff !important; } 


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.