How to change navigation font colour on one page?

I am trying to change the font colour of my site navigation on one page only and haven't had any luck at all with any code suggestions. I am using a Brine template. I've already added a custom logo code to the Advanced section of my portfolio page so I'm wondering if that's what's getting in my way? These are the codes I've tried (using my own collection #): 

#collection-5fc6f37befc65c5b7a35dc2e .Header-nav-item {
  color: #9b6b3b;
} 

and

nav#mainNavigation * {
    color: #9b6b3b !important;
}

If anyone could help, it would be so very appreciated! In case it helps, here is the code that's in there currently for the alternate logo (which is working just fine):

<style>
.header-title-logo a {
  content: url("https://static1.squarespace.com/static/5fc6eb4e9ea50d41209e5974/t/6004ba6e12a04d6cc4a550cc/1610922606737/LOGO+OPTION+3-+Lora-+transparent+background-+bronze.png");
  }
</style>

I tried to combine the two codes and it didn't do anything. Thanks so much for your help!

1 hour ago, mrsmahersbar said:

I am trying to change the font colour of my site navigation on one page only and haven't had any luck at all with any code suggestions. I am using a Brine template. I've already added a custom logo code to the Advanced section of my portfolio page so I'm wondering if that's what's getting in my way? These are the codes I've tried (using my own collection #): 

#collection-5fc6f37befc65c5b7a35dc2e .Header-nav-item {
  color: #9b6b3b;
} 

and

nav#mainNavigation * {
    color: #9b6b3b !important;
}

If anyone could help, it would be so very appreciated! In case it helps, here is the code that's in there currently for the alternate logo (which is working just fine):

<style>
.header-title-logo a {
  content: url("https://static1.squarespace.com/static/5fc6eb4e9ea50d41209e5974/t/6004ba6e12a04d6cc4a550cc/1610922606737/LOGO+OPTION+3-+Lora-+transparent+background-+bronze.png");
  }
</style>

I tried to combine the two codes and it didn't do anything. Thanks so much for your help!

I used the demo template, are you sure the collection id is correct?

#collection-56099b55e4b0ec7b8a89d273 .Header-nav-item,
#collection-56099b55e4b0ec7b8a89d273 .Mobile-overlay-nav-item {
  color: #9b6b3b;
} 

Use this extension to get the correct id for your page

Chrome Web Store - Extensions (google.com)

@bangank36 Thanks so much for your quick attempt to help! I am sure, that is the plugin I used after seeing another one of your posts. Whenever I enter it into the Advanced section of the page, the code shows up at the top of the page. Not sure what I'm doing wrong here.

14 minutes ago, mrsmahersbar said:

@bangank36 Thanks so much for your quick attempt to help! I am sure, that is the plugin I used after seeing another one of your posts. Whenever I enter it into the Advanced section of the page, the code shows up at the top of the page. Not sure what I'm doing wrong here.

You should paste into Design->Custom CSS instead of code injection

@bangank36Whenever I do that, nothing happens at all. It's very strange. Is the string of code you're providing the whole string or am I supposed to add something else to it? The colour should be a dark gold-brown but it's staying the same light colour as on my homepage. Thanks again for your help.

5 hours ago, mrsmahersbar said:

@bangank36Whenever I do that, nothing happens at all. It's very strange. Is the string of code you're providing the whole string or am I supposed to add something else to it? The colour should be a dark gold-brown but it's staying the same light colour as on my homepage. Thanks again for your help.

#collection-56099b55e4b0ec7b8a89d273

is demo id, you got to replace it with the one on your page

@bangank36I don't know how that happened... it wasn't letting me paste my collection id into the code. I tried again with the below code once I got the clipboard function working again and it's the same issue. Will not change colour. I have no idea why it's being so stubborn!

#collection-5fc6f37befc65c5b7a35dc2e .Header-nav-item,
#collection-5fc6f37befc65c5b7a35dc2e .Mobile-overlay-nav-item {
  color: #9b6b3b;
} 

1 hour ago, mrsmahersbar said:

@bangank36I don't know how that happened... it wasn't letting me paste my collection id into the code. I tried again with the below code once I got the clipboard function working again and it's the same issue. Will not change colour. I have no idea why it's being so stubborn!

#collection-5fc6f37befc65c5b7a35dc2e .Header-nav-item,
#collection-5fc6f37befc65c5b7a35dc2e .Mobile-overlay-nav-item {
  color: #9b6b3b;
} 

Is it the cover page? Custom css not apply on cover page.

What is your site url? I can have a look

On 1/20/2021 at 7:30 AM, mrsmahersbar said:

} 

Try add this to Cover Page Header

<style>
.Header-nav-item,.Mobile-overlay-nav-item {
  color: #9b6b3b;
} 
</style>

On 1/23/2021 at 6:24 AM, tuanphan said:

Try add this to Cover Page Header

<style>
.Header-nav-item,.Mobile-overlay-nav-item {
  color: #9b6b3b;
} 
</style>

 

@tuanphanAlso trying to change nav text color to black on this page but I'm stuck:

www.southernsunevents.com/about-us

16 minutes ago, SouthernSunEvents said:

@tuanphanAlso trying to change nav text color to black on this page but I'm stuck:

www.southernsunevents.com/about-us

we can have 2 ways:

- Add to Home > Design > Custom Css

#not-found .Header-nav-inner > a {
  color:#000 !important;
}

- Home > Pages > Choose the page you want to apply the nav text color

Adding to Advanced > PAGE HEADER CODE INJECTION

<style>
	.Header-nav-inner > a {
	    color: #000 !important;
    }
</style>

Change the color with one you want to apply

Let me know if it works properly on your site

Support me by pressing 👍 if this useful for you

On 10/27/2021 at 12:06 AM, SouthernSunEvents said:

@tuanphanAlso trying to change nav text color to black on this page but I'm stuck:

www.southernsunevents.com/about-us

You can use above code.

Or if you use Personal Plan, you can edit page >> Add a Code Block >> Paste above code. You can do similar for other pages

<style>
	.Header-nav-inner > a {
	    color: #000 !important;
    }
</style>

i have used this code to change the color for navigation buttons. it worked before but it hasnt past couple of months. im assuming b/c of windows update ? can you let us know how to re-enable the code so it works 

header.Header [href*="Category=sale"] {
    color: #FF0000 !important;

On 11/1/2021 at 9:47 PM, maxi said:

i have used this code to change the color for navigation buttons. it worked before but it hasnt past couple of months. im assuming b/c of windows update ? can you let us know how to re-enable the code so it works 

header.Header [href*="Category=sale"] {
    color: #FF0000 !important;

Can you share link to page where you need to change nav buttons? We can check easier

Also, your code missing closing } symbol

hello .. i figured it out 🙂 

www.maxishop.ca is the website .. 

On 11/4/2021 at 11:24 PM, maxi said:

hello .. i figured it out 🙂 

www.maxishop.ca is the website .. 

 

 

Did you figure it out or still need help??

On 10/26/2021 at 1:23 PM, bangank36 said:

<style>
	.Header-nav-inner > a {
	    color: #000 !important;
    }
</style>

This worked perfect but I forgot I'll also be needing to change the "+" drop down color for mobile and the "MENU" for tablet views. Any ideas? @tuanphan @bangank36

Thanks so much!

/* change header nav active style */
.header-nav-item--active a {
  background-image: none !important;
}

/* change header nav active style */
.header-nav-item--active a {
  color: #000000 !important;
  background-image: none !important;
}

23 hours ago, SouthernSunEvents said:

This worked perfect but I forgot I'll also be needing to change the "+" drop down color for mobile and the "MENU" for tablet views. Any ideas? @tuanphan @bangank36

Thanks so much!

Hi,

You can try adding to Home > Design > Custom Css

//Change the color of + button
@media screen and (min-width: 100px) and (max-width: 766px) {
  button.Mobile-bar-menu:after{
    color: red !important;  
  }
}

//Change the color of menu button
button.Mobile-bar-menu:after{
  color: red !important;
}

Change the color until it meets your desired result

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

On 11/16/2021 at 12:30 PM, bangank36 said:

//Change the color of + button
@media screen and (min-width: 100px) and (max-width: 766px) {
  button.Mobile-bar-menu:after{
    color: red !important;  
  }
}

//Change the color of menu button
button.Mobile-bar-menu:after{
  color: red !important;
}

Worked great! Thank you so much!

We have noted that when we have (1) variant for product ie one size, one colour, one of .. on the front end only the ADD TO CART button shows up. The size and colour drop menus do not show therefore the consumer doesn't know what they are buying .. until they click add to cart .. the size then shows up in the cart ! .. is there a CSS for this glitch ?