Jump to content

Need Help Changing Color of Fixed Header for Scrolling

Recommended Posts

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!

Edited by nattest
Link to comment
  • nattest changed the title to Need Help Changing Color of Fixed Header for Scrolling
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;
}

image.thumb.png.88cfb271927b35a98cb9c423e69b9d4f.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

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;
}

Link to comment
  • 4 months later...

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 !  

Edited by contactlelife
Link to comment
  • 2 months later...
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?

 

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

 

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...
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

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

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

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

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

 

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 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. 

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

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

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

 

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
  • 6 months later...

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

 

image.thumb.png.fdc8c43dd780ee5c9c63122421e3b206.png

Screen Shot 2022-06-30 at 18.10.48.png

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

 

image.thumb.png.fdc8c43dd780ee5c9c63122421e3b206.png

Screen Shot 2022-06-30 at 18.10.48.png

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;
}

 

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

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

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
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):

header.jpg

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.