Jump to content

Change color header navigation after scroll (transparent header)

Recommended Posts

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

Link to comment

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

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...

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

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 7 months later...

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

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

image.thumb.png.73047936cae89474d8514a4554bfa1ba.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.