Jump to content

Change navigation color on one page

Recommended Posts

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.thumb.png.fb1048e1f25bb429f51c181df58619c8.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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!

Link to comment
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;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

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

Link to comment
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;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@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!

Link to comment
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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...
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

Link to comment
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;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

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;
}
Edited by SashaMiana
Link to comment
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;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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);
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.