Jump to content

Change Individual Navigation Link Colors 7.1

Recommended Posts

Site URL: https://duck-buffalo-k3d3.squarespace.com

Hello! I am trying to change the two of the links on my navigation menu to red while keeping the others the same color. 

Here is the code I am using for the navigation menu:

//Dropdown Folder Style
.header-nav-folder-content {
   background: #d5d6da !important;
  color: #091e3e !important;
  font-size: 15pt;
  font-family: 'Courier';
   letter-spacing: .5px;

//Dropdown Folder Label

.header-nav-wrapper a {
    background-image: none !important;
  font-family: Arial;
  color: #091e3e !important;
}

 

Appreciate any help!

Link to comment
  • Replies 6
  • Views 2.6k
  • Created
  • Last Reply

Replace the code you have for dropdown folder label with this. Should work.

.header-nav-folder-item:nth-child(1) a {
  color: red !important;
}

.header-nav-folder-item:nth-child(2) a {
  color: red !important;
}

Change the number depending on the link you want to change.

We have code for adding icons here: https://bamn.digital/blog/add-custom-icons-to-squarespace-navigation

Contact us if you need help with your Squarespace website

Squarespace tips and insights from our blog

Bamn.Digital : Website Design, Development & Support

Link to comment
59 minutes ago, BamnDigital said:

Replace the code you have for dropdown folder label with this. Should work.

.header-nav-folder-item:nth-child(1) a {
  color: red !important;
}

.header-nav-folder-item:nth-child(2) a {
  color: red !important;
}

Change the number depending on the link you want to change.

We have code for adding icons here: https://bamn.digital/blog/add-custom-icons-to-squarespace-navigation

Thank You!!

Link to comment
  • 5 months later...
On 10/11/2020 at 1:13 AM, andruuuuu said:

im trying to change "home" to be red, but the codes above are not making any changes and its the only code in my custom CSS...any idea why?

im on 7.1

Thanks

Screen Shot 2020-10-10 at 1.13.06 PM.png

Can you share site url? We can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 8 months later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.