[Share] Custom Code - Navigation Link Color/Hover Color/Active Color

So I have a site that's not yet active as well but I am trying to figure out how to make the navigation links when hovered over change color like a button does and be highlighted with a background color... for instance I also work with this company CarCultureTV.com to see how the nav works.  

Would this coding plus something extra make that work or is even possible with squarespace?

UPDATE: I actually made it public to see... www.adamhyattphotography.com

Hi there, on my site: healthfulev.com, I added a box around one of my menu items in the secondary navigation. Since then the active color no longer shows for my secondary navigation. I added the code from above and its still not working. Can you please let me know what's wrong with my code?

/* navigation style */
.Header-nav.Header-nav--secondary a.Header-nav-item:nth-child(3) {
  background-color: white;
  padding: 10px 20px;
  border-radius: 0px;
  border: 1px solid black;
  color: black;
}

.Header-nav.Header-nav--secondary a.Header-nav-item:nth-child(3) {
  background-color: white;
  color: #black!important;
}

.Header-nav-item--active {
    color: #F634FA !important;
}

.Header-nav.Header-nav--primary a.Header-nav-item:hover {
  color: #F634FA!important;
}

.Header-nav.Header-nav--secondary a.Header-nav-item:hover {
  color: #F634FA!important;
}
/* navigation style */

Isn't the recommended way to change the navigation links in 7.1 to edit the theme colours?

Go to Design -> Colors then click on the pencil icon next to your active selected colour palette, and then select navigation links colour.

Or, are people doing the code changes so they can change the hover colours?  The samples I tried here for 7.1 aren't working on 7.1.

Sure, my nav bar turns red when hovering over it. I used this code, color is reddish pink.

/*  Change here the hovering background color!  */
@hover-background-color: #F1948A;;

Hey @tuanphan

This is great, but I have one question. I have a folder in my navigation bar with multiple pages that expand below it. With the code you provided - all items in the folder are highlighted as the active link. Possible to adjust it so that it's only the actual active page? 

www.ali.nyc/home

14 hours ago, kaatmaca said:

Hey @tuanphan

 

This is great, but I have one question. I have a folder in my navigation bar with multiple pages that expand below it. With the code you provided - all items in the folder are highlighted as the active link. Possible to adjust it so that it's only the actual active page? 

www.ali.nyc/home

Hi. Which code did you use?

@tuanphan Seriously super helpful! Thank you! Is there a code so we can have some type of hover highlight on Mobile? If not then maybe an underline? 🧐

21 minutes ago, TwoSpectacles said:

@tuanphan Seriously super helpful! Thank you! Is there a code so we can have some type of hover highlight on Mobile? If not then maybe an underline? 🧐

Can you share link to your site?

@tuanphan It's still being built.
conch-pufferfish-x8d5.squarespace.com
Pass:1234

6 minutes ago, TwoSpectacles said:

@tuanphan It's still being built.
conch-pufferfish-x8d5.squarespace.com
Pass:1234

 

underline link on hover (mobile)? 

.header-menu-nav-item:hover a {
    text-decoration: underline;
}

Not sure it will work on mobile ☺️

@tuanphan it worked! THANK YOU!

Worked! 

For Merida Template

.header-nav-item a {
    color:  !important;
}
/* Nav item hover color */
.header-nav-item a:hover {
    color: #ff4c00 !important;
}
/* Nav item active color */
.header-nav-item--active a {
    color: green !important;
}

Can you help me? Just trying to change the second link in my navigation to red (Shot Patients) and I can't seem to get the code to work that you listed for the Five template. Thank you!

www.allergyme.com 

How would i add a button to the secondary nav on hover to match the primary one? and how would i center the text and the box under shop

ByPaigeJordan.com

Thanks

11 hours ago, PJ22 said:

How would i add a button to the secondary nav on hover to match the primary one? and how would i center the text and the box under shop

ByPaigeJordan.com

Thanks

I see 2 buttons here. Did you solve?

Thanks for the quick reply. Not yet. We want the secondary buttons to be the same as shop and about, As you hover over the buttons we would like for the box to be highlighted black and the text to turn white

On 4/16/2020 at 1:46 AM, amuz said:

Can you help me? Just trying to change the second link in my navigation to red (Shot Patients) and I can't seem to get the code to work that you listed for the Five template. Thank you!

www.allergyme.com 

sorry, missing your comment.

You mean active link, hover link or?

14 hours ago, PJ22 said:

Thanks for the quick reply. Not yet. We want the secondary buttons to be the same as shop and about, As you hover over the buttons we would like for the box to be highlighted black and the text to turn white

Add to Home > Design > Custom CSS

a.Header-nav-folder-item:hover {
    background: black;
    color: white !important;
}
span.Header-nav-folder {
    padding: 0;
}
span.Header-nav-folder a {
    padding: 15px 5px;
}

3 hours ago, tuanphan said:

sorry, missing your comment.

You mean active link, hover link or?

Add to Home > Design > Custom CSS

a.Header-nav-folder-item:hover {
    background: black;
    color: white !important;
}
span.Header-nav-folder {
    padding: 0;
}
span.Header-nav-folder a {
    padding: 15px 5px;
}

 

That worked perfectly Thanks for all of your help. One last thing if possible, can we center the box and text to aligned under shop? The box comes out towards the right side, maybe if it could come out evenly on the left side to match the right side with the text centered,  i attached a similar example below

9 hours ago, PJ22 said:

That worked perfectly Thanks for all of your help. One last thing if possible, can we center the box and text to aligned under shop? The box comes out towards the right side, maybe if it could come out evenly on the left side to match the right side with the text centered,  i attached a similar example below

 

span.Header-nav-folder {
    left: -10px !important;
}

13 hours ago, tuanphan said:

span.Header-nav-folder {
    left: -10px !important;
}

 

Big Thank you.

On 11/1/2019 at 2:41 AM, tuanphan said:

/* Nav item color */ .header-nav-item a { color: #ff0000 !important; } /* Nav item hover color */ .header-nav-item a:hover { color: violet !important; } /* Nav item active color */ .header-nav-item--active a { color: green !important; }

Hi! I used this code on a 7.1 site, and it changes all the menu items, including the dropdown. Can  you provide code that doesn't affect the dropdown menu items, only the main navigation item? Thanks!

On 7/14/2020 at 1:31 AM, Umlaut said:

Hi! I used this code on a 7.1 site, and it changes all the menu items, including the dropdown. Can  you provide code that doesn't affect the dropdown menu items, only the main navigation item? Thanks!

Can you share link to your site? I can check easier.

11 hours ago, tuanphan said:

Can you share link to your site? I can check easier.

I don't have the menu live until I can get this code fixed. But I have taken a screenshot of how it's working w/the code. All copy is red to pink on hover, and I'm actually curious how to either:

1. Turn just  top level nav words like "egg donors" to a different color font OR

2. Add a color background to the top level nav words when that menu item is selected/hovered over. (preferred)

Open to options, just don't know how to do it! Tried inspecting and changing different elements, but can't seem to identify the right ones unfortunately

Fixed: Squarespace 7.1. Nav Hover Link Color

Hi there! Is there anyone who can help me with this? I really would like to know how to change the nav word apart from the dropdown menu items.