Main navigation color change on only 1 page

Site URL: https://yourecloser.co/

Hi there! 

I would like to designate a different color (blue) for the main navigation top menu of my homepage (only).

All other pages can keep the current color menu (which is white).

I'm working on a Mentor - SquareSpace 7.0 template

Any help to make this change possible would be greatly appreciated! 

Thank you and don't hesitate to ask me for more info :) 

Jonathan

Hey Jonathan,  you'll want to select the specific page first, then the header on that page. CSS should be this:

#collection-5b04518e88251b9e5e84a20f .Header--bottom{
  background:blue;
}

Video link here if you're curious how I got it. (Warning, I talk fast)

Let me know if that does it for you!

Hi Will, 

That video was fantastic! 

One thing I maybe haven't made clear is that I wanted to change the color of the font menu (About, Work with me, What clients say, Contact) from white to blue (this blue #006F9E), on that homepage. 

Not the background banner, although it could have worked too 🙂 

I guess the manipulation is pretty similar, but would you be so kind to send me the code? 

Then I'm actually not clear where to paste the code, as I will need this on just that main page... oh but as you selected the specific collection, maybe I can paste it "code injection on every page header"?

Thank you so much! 

J -

On 3/30/2021 at 11:32 AM, magnin.jonathan said:

Hi Will, 

That video was fantastic! 

One thing I maybe haven't made clear is that I wanted to change the color of the font menu (About, Work with me, What clients say, Contact) from white to blue (this blue #006F9E), on that homepage. 

Not the background banner, although it could have worked too 🙂 

I guess the manipulation is pretty similar, but would you be so kind to send me the code? 

 

Then I'm actually not clear where to paste the code, as I will need this on just that main page... oh but as you selected the specific collection, maybe I can paste it "code injection on every page header"?

Thank you so much! 

J -

Add to Design > Custom CSS

/* homepage nav items color */
body.homepage .Header-nav-item {
    color: #006f9e !important;
}

Hi @tuanphan

Thank you so much for your answer. 

However when I take your code and paste it in the Code injection Header, it just shows the code on top of the page, without changing the menu color. 

I also tried to paste it in the code in the home page header itself, in the advanced tab, but it does nothing. 

Quite difficult when you don't know much about coding... sorry to bug you, I'm sure we're so close to sort this out! 

Thank you, 

J -

On 4/1/2021 at 5:51 AM, magnin.jonathan said:

Hi @tuanphan

Thank you so much for your answer. 

However when I take your code and paste it in the Code injection Header, it just shows the code on top of the page, without changing the menu color. 

I also tried to paste it in the code in the home page header itself, in the advanced tab, but it does nothing. 

Quite difficult when you don't know much about coding... sorry to bug you, I'm sure we're so close to sort this out! 

Thank you, 

J -

Above code add to Design > Custom CSS

If you want to insert to Page Header, you need to wrap in style tag

<style>
  /* homepage nav items color */
.Header-nav-item {
    color: #006f9e !important;
}
</style>

If you insert to Code Injection Header, use this code

<style>
  /* homepage nav items color */
body.homepage .Header-nav-item {
    color: #006f9e !important;
}
</style>