Change navigation color on one page

Site URL: https://www.forestcityohio.com/masonry-services

I would like to change the navigation color just on this page https://www.forestcityohio.com/masonry-services

to black.

What custom code should I use?

22 hours ago, santinapro said:

Site URL: https://www.forestcityohio.com/masonry-services

I would like to change the navigation color just on this page https://www.forestcityohio.com/masonry-services

to black.

 

What custom code should I use?

Try adding to Home > Design > Custom Css

#collection-61db81ee110e746fbaf9e25e .header-nav-item > a {
  color: #000;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

My testing

4 hours ago, bangank36 said:

#collection-61db81ee110e746fbaf9e25e .header-nav-item > a {
  color: #000;
}

Thank you! That worked.  If I want to do it on other pages  - how do I adjust the code?

Duplicate my code and change the page id

you can use the following extension  to detect the page id:  https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Hi @tuanphan we are also trying to figure out a solution to this problem mentioned above.

Right now we have the nav in white on one page but we'd like it to be black on the rest of the site. We've tried to add the code mentioned above in the css as well as the individual page code injections but without success. Could you take a look and let us know what we're doing wrong?

Also, we have an alternative logo in the top right that we are trying to make link to a different page on the site. Right now if you try clicking it, it doesn't navigate anywhere. Any help with this would be greatly appreciated as well.

The site link is: https://spinach-circle-hb9w.squarespace.com/ and the password is DoveLove2022!

On 4/23/2022 at 4:02 AM, MinerMan2022 said:

Hi @tuanphan we are also trying to figure out a solution to this problem mentioned above.

Right now we have the nav in white on one page but we'd like it to be black on the rest of the site. We've tried to add the code mentioned above in the css as well as the individual page code injections but without success. Could you take a look and let us know what we're doing wrong?

Also, we have an alternative logo in the top right that we are trying to make link to a different page on the site. Right now if you try clicking it, it doesn't navigate anywhere. Any help with this would be greatly appreciated as well.

The site link is: https://spinach-circle-hb9w.squarespace.com/ and the password is DoveLove2022!

#2. It looks like you solved?

#1. Add to design > Custom CSS

/* nav items color */
body:not(.homepage) .header-nav-item a {
    color: black !important;
}

Hi bangank36 and @tuanphan!

I am also trying to solve this dilemma. We need the header text -- navigation links, logo, social icons, search bar -- to be white on our homepage as it lays over an image, but we need the header navigation text on the rest of the whole website to be black.

How do I manipulate the color of the header text on the homepage only?

I have tried copy/pasting the above code into the Custom CSS block, but it hasn't seemed to produce any change.

I would greatly appreciate your help! Thank you in advance.

Courtney 
MFCreativeDesigns.com

15 hours ago, CourtneyCarlton said:

Hi bangank36 and @tuanphan!

I am also trying to solve this dilemma. We need the header text -- navigation links, logo, social icons, search bar -- to be white on our homepage as it lays over an image, but we need the header navigation text on the rest of the whole website to be black.

How do I manipulate the color of the header text on the homepage only?

I have tried copy/pasting the above code into the Custom CSS block, but it hasn't seemed to produce any change.

I would greatly appreciate your help! Thank you in advance.

Courtney 
MFCreativeDesigns.com

Add to Design > Custom CSS

body.homepage header.Header.Header--top * {
    filter: invert(1);
}
body.homepage a.Header-branding {
    filter: invert(0) !important;
}

@tuanphan AMAZING!! That solved the problem. I can't tell you how long I sat here yesterday trying to solve the problem myself. Thank you, thank you, thank you!!

One more thing; that code changed the link colors and everything else on the home page successfully (yay! happy dance!), but one of the header navigation links is a folder. I know this must involve much more code in order to invert/manipulate the folder color as well for just the home page (changing the folder link color to white (it stayed black on the home page)), and changing the drop-down links back to black (they changed to white with the code you provided).

Any chance you know how to get around this, too?? I would love to send you a venmo or coffee giftcard for your trouble! I really appreciate your help. 

Here is the website I'm working on: https://www.mfcreativedesigns.com/

Thank you again!

20 hours ago, CourtneyCarlton said:

@tuanphan AMAZING!! That solved the problem. I can't tell you how long I sat here yesterday trying to solve the problem myself. Thank you, thank you, thank you!!

One more thing; that code changed the link colors and everything else on the home page successfully (yay! happy dance!), but one of the header navigation links is a folder. I know this must involve much more code in order to invert/manipulate the folder color as well for just the home page (changing the folder link color to white (it stayed black on the home page)), and changing the drop-down links back to black (they changed to white with the code you provided).

Any chance you know how to get around this, too?? I would love to send you a venmo or coffee giftcard for your trouble! I really appreciate your help. 

Here is the website I'm working on: https://www.mfcreativedesigns.com/

Thank you again!

It looks like you solved it? I see it already white now

On 5/26/2022 at 11:37 AM, tuanphan said:

Add to Design > Custom CSS

body.homepage header.Header.Header--top * {
    filter: invert(1);
}
body.homepage a.Header-branding {
    filter: invert(0) !important;
}

 

Hello @tuanphan I tried this on my site and it did not change it to white. I am using Ventura 7.1

Any help would be greatly appreciated 

Thanks

20 hours ago, lianne0rp said:

Hello @tuanphan I tried this on my site and it did not change it to white. I am using Ventura 7.1

Any help would be greatly appreciated 

 

Thanks

The code is for 7.0. With 7.1, and Homepage, use this code

body.homepage div.header-nav-item>a {
	color: white !important;
}

Hi @tuanphan!

I used this code (below) and it worked perfectly to make the navigation black on the rest of the site. However, the "cart" button is still showing white on the rest of the website, making it invisible as the rest of the site is on a white background.

Also, on mobile view, it seems to not be applied at all as every page is white text and white menu icon on white background. Can you help me?

Website: www.miracleinamanger.com

password: miracle123

/* nav items color */
body:not(.homepage) .header-nav-item a {
    color: black !important;
}

On 10/12/2022 at 11:21 PM, SashaMiana said:

Hi @tuanphan!

 

I used this code (below) and it worked perfectly to make the navigation black on the rest of the site. However, the "cart" button is still showing white on the rest of the website, making it invisible as the rest of the site is on a white background.

Also, on mobile view, it seems to not be applied at all as every page is white text and white menu icon on white background. Can you help me?

Website: www.miracleinamanger.com

password: miracle123

 

/* nav items color */
body:not(.homepage) .header-nav-item a {
    color: black !important;
}

Hi,

#1. Use this code for cart

body:not(.homepage) svg.icon.icon--cart {
    stroke: black !important;
}
body:not(.homepage) .sqs-cart-quantity {
    color: black;
}

#2. Use this code for burger icon

body:not(.homepage):not(.header--menu-open) .burger-inner>div {
    background-color: black !important;
}

Hi @tuanphan,

I've been trying to invert the color of the logo to the home page only. When use the codes on this page, it makes the logo in all pages black and I can't seem to make it white just on this page https://www.nicolasblackelk.com/

Can you help me? 

Thanks! 

@tuanphan That worked!! Thank you so very much! 

Sasha

@tuanphan,

I guess I spoke too soon. I haven't changed anything and I have no idea why, but now all of a sudden none of the codes are working, including the first to get the site nav black on the rest of the site (except home page). Kinda freaking out. Can you help?

Thank you!

On 10/20/2022 at 12:29 AM, PCale said:

Hi @tuanphan,

I've been trying to invert the color of the logo to the home page only. When use the codes on this page, it makes the logo in all pages black and I can't seem to make it white just on this page https://www.nicolasblackelk.com/

Can you help me? 

Thanks! 

Use this new code

body.homepage .header-title-logo img {
    filter: invert(1);
}

On 10/21/2022 at 12:47 AM, SashaMiana said:

@tuanphan,

 

I guess I spoke too soon. I haven't changed anything and I have no idea why, but now all of a sudden none of the codes are working, including the first to get the site nav black on the rest of the site (except home page). Kinda freaking out. Can you help?

 

Thank you!

Maybe syntax error. Can you send all current code in CSS box?

On 4/24/2022 at 3:39 AM, tuanphan said:

#2. It looks like you solved?

#1. Add to design > Custom CSS

/* nav items color */
body:not(.homepage) .header-nav-item a {
    color: black !important;
}

 

just saved my life thank you