Need Help Changing Color of Fixed Header for Scrolling

Site URL: http://www.saltycopy.com

Hello,

I am struggling to figure out how to edit my header. I want a transparent, fixed header  (with white text) when at the top of a page on my site. I would like to change the color of the fixed header to an aqua (#c7faeb) with black text when I scroll. I've been playing with various CSS codes for this but haven't figured it out yet. I am using Squarespace 7.1 and any help would be very much appreciated!

8 minutes ago, nattest said:

Site URL: http://www.saltycopy.com

Hello,

I am struggling to figure out how to edit my header. I want a transparent, fixed header  (with white text) when at the top of a page on my site. I would like to change the color of the fixed header to an aqua (#c7faeb) with black text when I scroll. I've been playing with various CSS codes for this but haven't figured it out yet. I am using Squarespace 7.1 and any help would be very much appreciated!

Please try this custom css

.tweak-fixed-header .shrink.header {
  background: #c7faeb !important;  
}
.tweak-fixed-header .shrink.header .header-nav-wrapper a {
  color: #000 !important;
}

Thank you so much! Here's the full code I ended up using: 
#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;
}

Hello! I was trying to do the same in my squarespace 7.1 main page but the text color does not change..can you guys help me please?

I want a transparent fixed header with white text at the top of the home page and also it would be cool if it  changes the color of the fixed header to a white background with the menu text links in navy black  (#050a29) when I scroll down the page. I haven't found the right css...

(I have a custom css so the website can display  the hamburguer  menu style,  don't know if this affects somewhat the menu colors to be customized)

Thanks !  

On 11/21/2020 at 3:53 AM, nattest said:

Thank you so much! Here's the full code I ended up using: 
#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;
}

Thanks for sharing, it works perfect! Just the Instagram icon doesn't change color. Any ideas on how to change this color too?

@AlexandraW Can you share site url? We can check instagram color easier

Hi Tuanphan,

Thanks! That's de-bewuste-optimist.squarespace.com
Password is CacaoCreatives

The same website I shared a couple of hours ago with you :-). Thanks in advance!!

Alexandra

On 6/22/2021 at 5:22 PM, AlexandraW said:

Hi Tuanphan,

Thanks! That's de-bewuste-optimist.squarespace.com
Password is CacaoCreatives

The same website I shared a couple of hours ago with you :-). Thanks in advance!!

 

Alexandra

Add to Design > Custom CSS

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

On 11/20/2020 at 9:33 PM, nattest said:

Site URL: http://www.saltycopy.com

Hello,

I am struggling to figure out how to edit my header. I want a transparent, fixed header  (with white text) when at the top of a page on my site. I would like to change the color of the fixed header to an aqua (#c7faeb) with black text when I scroll. I've been playing with various CSS codes for this but haven't figured it out yet. I am using Squarespace 7.1 and any help would be very much appreciated!

I have a similar problem to this where the navigation bar is transparent scrolling down but when you scroll back up it turns black with white text. I didn't write any code regarding the navigation bar so i'm not sure how the problem came to be or how to fix it. If anybody has any solutions, please let me know

15 hours ago, teraphina20 said:

I have a similar problem to this where the navigation bar is transparent scrolling down but when you scroll back up it turns black with white text. I didn't write any code regarding the navigation bar so i'm not sure how the problem came to be or how to fix it. If anybody has any solutions, please let me know

Hi. What is your site url?

On 8/18/2021 at 5:00 AM, tuanphan said:

Hi. What is your site url?

Site is private right now but here is a video of the issue

7 hours ago, teraphina20 said:

Site is private right now but here is a video of the issue

 

 

ShapingScholarsIssue.mov SSCIssue.mov

If your site is trial/private, you can setup password & share url

On 11/20/2020 at 6:53 PM, nattest said:

Thank you so much! Here's the full code I ended up using: 
#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;
}

Hi there - this code works well for me too but is there a way to also change the cart icon and the site title also to black when you scroll?  Thanks!!! 

On 12/8/2021 at 3:28 AM, pipd said:

Hi there - this code works well for me too but is there a way to also change the cart icon and the site title also to black when you scroll?  Thanks!!! 

Try this CSS

header#header.shrink a#site-title, header#header span {
	color: red !important;
}
header#header.shrink svg {
	stroke: red !important;
	fill: red !important;
}

On 12/11/2021 at 7:39 AM, tuanphan said:

Try this CSS

header#header.shrink a#site-title, header#header span {
	color: red !important;
}
header#header.shrink svg {
	stroke: red !important;
	fill: red !important;
}

 

Great!! Thank you so much 🙂 works perfectly. 

Just now, pipd said:

Great!! Thank you so much 🙂 works perfectly. The only thing that still doesn’t change is the burger menu on mobile.

it’s still is in white so doesn’t show up. Is there a way to change this to black as well on the upward scroll?

thank you! 

On 12/14/2021 at 4:39 AM, pipd said:

thank you! 

You fixed or still need help with question in quote box??

5 hours ago, tuanphan said:

You fixed or still need help with question in quote box??

Yes I’d love help changing the colour of the burger icon. The site title and the cart both turn black on upward scroll but the burger stays in white so it’s not visible.

thank you! 

On 12/17/2021 at 8:59 PM, pipd said:

Yes I’d love help changing the colour of the burger icon. The site title and the cart both turn black on upward scroll but the burger stays in white so it’s not visible.

thank you! 

Try this  code

header#header.shrink .burger-inner>div {
	background-color: black !important;
}

4 hours ago, tuanphan said:

Try this  code

header#header.shrink .burger-inner>div {
	background-color: black !important;
}

 

This works perfectly! Thank you so much 🙂 

hi there!

i tried something similar to my header, and it works almost fine when scrolling it down... except for the logo and the language switcher. any advise on this? the site is still under development, but there are only 3 "sections" with full bleed images on the top: homepage, artists/portfolio (example attached) and sobre (about).

site url: https://sawfish-lute-xb5x.squarespace.com/artistas/ana-julia-vilela
password: central2022

1 hour ago, g-souza said:

hi there!

i tried something similar to my header, and it works almost fine when scrolling it down... except for the logo and the language switcher. any advise on this? the site is still under development, but there are only 3 "sections" with full bleed images on the top: homepage, artists/portfolio (example attached) and sobre (about).

site url: https://sawfish-lute-xb5x.squarespace.com/artistas/ana-julia-vilela
password: central2022

 

Add this code under

header#header.shrink img {
    filter: invert(0);
    -webkit-filter: invert(0);
}
header#header.shrink span.current-language-name {
    color: black;
}
header#header.shrink span.chevron.chevron--down {
    color: black;
}

22 hours ago, tuanphan said:

Add this code under

header#header.shrink img {
    filter: invert(0);
    -webkit-filter: invert(0);
}
header#header.shrink span.current-language-name {
    color: black;
}
header#header.shrink span.chevron.chevron--down {
    color: black;
}

 

it works perfectly. many thanks @tuanphan 🙂

but i have a little problem with the homepage, since its solid header wrapper is not appearing when scrolling down. i believe it's because i have a code to force the header to be transparent (a workaround I put to have a full bleed carrousel on that page). any advise on this would be very useful!

3 hours ago, g-souza said:

it works perfectly. many thanks @tuanphan 🙂

but i have a little problem with the homepage, since its solid header wrapper is not appearing when scrolling down. i believe it's because i have a code to force the header to be transparent (a workaround I put to have a full bleed carrousel on that page). any advise on this would be very useful!

Can you explain this?

solid header wrapper is not appearing when scrolling down

13 hours ago, tuanphan said:

Can you explain this?

solid header wrapper is not appearing when scrolling down

on my homepage, the header remains transparent even after scrolling the page down. ideally, it should behave as the other pages (turning into a solid white rectangle):