Change colour of navigation within one page and only on homepage

Site URL: https://www.ballihoo.co.za/home

Okay, this is a pretty specific question but the use case is actually quite common from a design perspective.

To explain: I have a white BG navigation with pink logo (PNG) and text/links. It also uses the Transparent option under Edit Site Header > Colors. This is of course throughout the site and works great for the most part, but...

On the homepage only, I want to have the navigation start as white text on transparent (as it sits on top of a darkish full bleed hero image) and then once the BG of the navigation fades in (a built in function of setting the navigation to Transparent) I want the text and logo to change to pink.

It's a bit tough to put in words so hopefully the images and link help to covey the request.

And this change would have to be able to be applied to the drop-downs from foldered nav items, because this looks awful...

3 hours ago, Demian said:

Site URL: https://www.ballihoo.co.za/home

Okay, this is a pretty specific question but the use case is actually quite common from a design perspective.

To explain: I have a white BG navigation with pink logo (PNG) and text/links. It also uses the Transparent option under Edit Site Header > Colors. This is of course throughout the site and works great for the most part, but...

On the homepage only, I want to have the navigation start as white text on transparent (as it sits on top of a darkish full bleed hero image) and then once the BG of the navigation fades in (a built in function of setting the navigation to Transparent) I want the text and logo to change to pink.

It's a bit tough to put in words so hopefully the images and link help to covey the request.

 

And this change would have to be able to be applied to the drop-downs from foldered nav items, because this looks awful...

 

You can try this snippet in Design->Custom Css

header:not(.shrink) .header-nav-wrapper a {
  color: #fff !important;
}
header:not(.shrink) .header-title-logo img {
  filter: brightness(0) invert(1);
}
header:not(.shrink)  .header-nav-folder-content {
    background-color: transparent !important;
}

Holy moly @bangank36! That is some elegant and creative code - I love that you used a filter to change the logo color. I was expecting to need jquery and I love that it doesn't. Truely excellent.

There is one quite significant problem however, in my original post I wrote "On the homepage only" What I meant was that I only want this behaviour on the homepage. Everywhere else I want the navigation to use the pink on white BG version - what the navigation changes to once scrolling has commenced.

On 12/17/2020 at 6:07 PM, bangank36 said:

On the homepage only, I want to have the navigation start as white text on transparent (as it sits on top of a darkish full bleed hero image) and then once the BG of the navigation fades in (a built in function of setting the navigation to Transparent) I want the text and logo to change to pink.

Reason being is that all other pages on the website have a white BG so, as it is now, the nav can't be seen. You can see this on the Contact page for example, or the About page where the nav can't be seen until you scroll the page down and it changes to pink on white BG.

So to be clear, on the page named "home" I want the nav to begin as White with a transparent BG and then, once scrolling has begun, I want the nav to change to pink with a white BG (this part is happening perfectly now, thanks to you). On all other pages I want the nav to always appear pink with a white BG - there is no need for it to change color (this is the part that is not happening).

Is this still possible?

Thanks again for your time and knowledge!!

Okay, did some digging and managed to figure this last little tweak out myself - whereby I wanted the effect to only apply to the homepage. Thought I'd post in case anyone else stumbles across this.

You'll need to find out the collection ID of the homepage (or page you want this effect to be specific to). You can do this using the inspect function of your browser. Find body id= (very near the top of the code) and you'll want to copy "collection" and the long string of letters and numbers afterwards, eg. "collection-5fab8b7a8424282166b75a81"

Once you have that copied into your clipboard go to the Custom CSS area of your site. You need to wrap #collection-5fab8b7a8424282166b75a81  (where that long string is your own copied collection id) around the code that @bangank36 provided. So it would look something like:

#collection-5fab8b7a8424282166b75a81 {
	header:not(.shrink) .header-nav-wrapper a {
  		color: #fff !important;
	}
	header:not(.shrink) .header-title-logo img {
  		filter: brightness(0) invert(1);
	}
	header:not(.shrink)  .header-nav-folder-content {
    		background-color: transparent !important;
	}
}

Violá! 

1 minute ago, Demian said:

Okay, did some digging and managed to figure this last little tweak out myself - whereby I wanted the effect to only apply to the homepage. Thought I'd post in case anyone else stumbles across this.

You'll need to find out the collection ID of the homepage (or page you want this effect to be specific to). You can do this using the inspect function of your browser. Find body id= (very near the top of the code) and you'll want to copy "collection" and the long string of letters and numbers afterwards, eg. "collection-5fab8b7a8424282166b75a81"

Once you have that copied into your clipboard go to the Custom CSS area of your site. You need to wrap #collection-5fab8b7a8424282166b75a81  (where that long string is your own copied collection id) around the code that @bangank36 provided. So it would look something like:

 

#collection-5fab8b7a8424282166b75a81 {
	header:not(.shrink) .header-nav-wrapper a {
  		color: #fff !important;
	}
	header:not(.shrink) .header-title-logo img {
  		filter: brightness(0) invert(1);
	}
	header:not(.shrink)  .header-nav-folder-content {
    		background-color: transparent !important;
	}
}

Violá! 

I'm glad that you can make thing work on your own, to add some more info about how to get the collection, anyone who need it can use this Chrome extension for making process easier

Squarespace ID Finder - Chrome Web Store (google.com)

On 12/21/2020 at 8:28 PM, Demian said:

Okay, did some digging and managed to figure this last little tweak out myself - whereby I wanted the effect to only apply to the homepage. Thought I'd post in case anyone else stumbles across this.

You'll need to find out the collection ID of the homepage (or page you want this effect to be specific to). You can do this using the inspect function of your browser. Find body id= (very near the top of the code) and you'll want to copy "collection" and the long string of letters and numbers afterwards, eg. "collection-5fab8b7a8424282166b75a81"

Once you have that copied into your clipboard go to the Custom CSS area of your site. You need to wrap #collection-5fab8b7a8424282166b75a81  (where that long string is your own copied collection id) around the code that @bangank36 provided. So it would look something like:

 

Thank you so much for posting your solution. it was exactly what i was trying to do and seems very common in design, not sure why they make it so difficult to achieve. cheers!

Hey!

This is super helpful!

I was wondering what to do and if you could help me. I have a white logo and the nav bar text is white but the other pages I want to switch to a black logo and nav bar with black text.

Any suggestions would be amazing.

Thanks!

On 2/18/2023 at 1:07 AM, gabyl45 said:

Hey!

This is super helpful!

I was wondering what to do and if you could help me. I have a white logo and the nav bar text is white but the other pages I want to switch to a black logo and nav bar with black text.

Any suggestions would be amazing.

Thanks!

Hi,

This is possible, however we need site url, we can give code easier

Hey There,

How can I invert the colour for the social media icons as well? Some pages on this site have a white background.

Thanks in advance.

1 hour ago, serhan said:

Hey There,

How can I invert the colour for the social media icons as well? Some pages on this site have a white background.

Thanks in advance.

What is site url? We can check easier