Change color header navigation after scroll (transparent header)

Site URL: https://de-bewuste-optimist.squarespace.com

Hi all,

I'm looking for a piece of code to change the color of the header navigation links (SquareSpace 7.1, the website is still under construction). The header background is transparent and the navigation is white (I like it this way :-)). After scrolling, the header background turns white (I like it that way :-)) so I would love to change the color of the navigation to black. Any ideas? 

Thanks so much!!

Alexandra

--

Ps. the code I'm using to change the header background color is:

#header {
background: rgba(255,255,255,1);
}

Hi. What is site access password?

Hi Tuanphan,

Thanks! The password is CacaoCreatives 

I just managed to change the header and navigation color after scroll the way I like it (see code below), but I would love to change the Instagram color after scroll to black too (it's still stays white now). Any ideas on how to do this? Thanks so much!
 

Alexandra

--

#header {
  background-color: transparent;
}
.header-announcement-bar-wrapper {
  background-color: rgba(0,0,0,0)!important;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
}
.tweak-fixed-header .shrink.header {
  background: #c7faeb !important;  
}
.tweak-fixed-header .shrink.header .header-nav-wrapper a {
  color: #000 !important;
}

On 6/22/2021 at 3:23 PM, AlexandraW said:

Hi Tuanphan,

Thanks! The password is CacaoCreatives 

I just managed to change the header and navigation color after scroll the way I like it (see code below), but I would love to change the Instagram color after scroll to black too (it's still stays white now). Any ideas on how to do this? Thanks so much!
 

Alexandra

--

#header {
  background-color: transparent;
}
.header-announcement-bar-wrapper {
  background-color: rgba(0,0,0,0)!important;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
}
.tweak-fixed-header .shrink.header {
  background: #c7faeb !important;  
}
.tweak-fixed-header .shrink.header .header-nav-wrapper a {
  color: #000 !important;
}

Add to Design > Custom CSS

/* sticky header instagram */
header.shrink .header-actions svg {
    fill: black !important;
}

Thanks so much, really appreciated!!

Kind regards,

Alexandra

Hi All, 

I'm trying to achieve a similar effect to the above but with the logo and navigation text changing colour on scroll after the first section of my site (hero), and to the homepage only. 

The colours are currently set to black (logo and navigation links) but I can set these to white. I need these to change to black once the background scrolls to the white section of the homepage/touches the header.

Is this achievable with CSS or do I need JS?

url: https://www.studiorhl.com/home-copy

Many thanks! N

On 12/10/2022 at 8:08 PM, noblestudio said:

Hi All, 

I'm trying to achieve a similar effect to the above but with the logo and navigation text changing colour on scroll after the first section of my site (hero), and to the homepage only. 

The colours are currently set to black (logo and navigation links) but I can set these to white. I need these to change to black once the background scrolls to the white section of the homepage/touches the header.

Is this achievable with CSS or do I need JS?

url: https://www.studiorhl.com/home-copy

Many thanks! N

Hi,

You mean

Scroll after first section, on homepage only, header will

• Logo to Black
• Nav items to black

If scroll only, no need first section, CSS is enough, but with your request, will need script code (requires a Business Plan or higher)

Hi @tuanphan 

Yes exactly, from white to black but only when the white background touches the header. The site is on a business plan. 

https://potato-lime-5lwd.squarespace.com/config/settings/site-visibility
pw: studiorhl

I've uploaded both logo files in white and black in the CSS custom files. 

lmk if you need anything else from my end?

Thank you! N

On 12/16/2022 at 7:45 PM, noblestudio said:

Hi @tuanphan 

Yes exactly, from white to black but only when the white background touches the header. The site is on a business plan. 

https://potato-lime-5lwd.squarespace.com/config/settings/site-visibility
pw: studiorhl

I've uploaded both logo files in white and black in the CSS custom files. 

lmk if you need anything else from my end?

Thank you! N

Can you enable Fixed Header first? Then we can do it easier

On 12/21/2022 at 12:43 AM, tuanphan said:

Can you enable Fixed Header first? Then we can do it easier

No problem, fixed header position is enabled – thank you! 

N

On 12/24/2022 at 6:52 AM, noblestudio said:

No problem, fixed header position is enabled – thank you! 

N

Can you share link to a page? It shows WEBSITE UNDER CONSTRUCTION

https://potato-lime-5lwd.squarespace.com/home?noredirect

Hi @tuanphan yes of course, there is currently a holding page live. 

Links to the website: 
https://www.studiorhl.com/home-copy 
https://potato-lime-5lwd.squarespace.com/home-copy

Thanks, N

Hi @tuanphan,

I tried with this code: 
 

//NAVIGATION//
.header-announcement-bar-wrapper.shrink {
    background: #251940 !important;
}

.title-nav-wrapper.shrink {
    padding-top: 5px !important;
    padding-bottom: 5px !important
}
header#header img {
    transition: all 0.1s;
}
header#header.shrink img {
    max-height: 70px;
    transition: all 0.1s;
}

It worked on the home page (https://www.massage1936.com/) but not on some (the clinic page for example: https://www.massage1936.com/clinic )

I would like it to be as it is on the homepage across the whole site.

Many thanks

On 8/18/2023 at 9:12 PM, EC2410 said:

Hi @tuanphan,

I tried with this code: 
 

//NAVIGATION//
.header-announcement-bar-wrapper.shrink {
    background: #251940 !important;
}

.title-nav-wrapper.shrink {
    padding-top: 5px !important;
    padding-bottom: 5px !important
}
header#header img {
    transition: all 0.1s;
}
header#header.shrink img {
    max-height: 70px;
    transition: all 0.1s;
}

It worked on the home page (https://www.massage1936.com/) but not on some (the clinic page for example: https://www.massage1936.com/clinic )

I would like it to be as it is on the homepage across the whole site.

Many thanks

You mean change header background color on scroll?

Use this code

header#header.shrink {
    background-color: #251940 !important;
}

Thanks so much, that worked!