Jump to content

Gods of code i need help. How to change logo + burguer color as i scroll in my homepage (dif. color for different sections)

Recommended Posts

Posted (edited)

Good morning,
In the first place let me thank you in advance for your help.

I'm making a website and I have the homepage practically ready (only mobile yet) but I'm having trouble changing the color of the header items (logo, burger). 

What I want to do is make the colors change when I scroll through the homepage, depending on the theme of the section (check image).

For some reason writing ".light" ".black" whatever doesn't trigger anything.

www.oak35.com/homepage (check on mobile)

Thanks!

 

.light header#header img {
  content: url(//images.squarespace-cdn.com/content/v1/65a6654f64932547f4cbac64/c1573739-7fb2-426a-8da2-f78b87f41936/logo_transp_darkgrey.png);
}

.black header#header img {
  content: url(//images.squarespace-cdn.com/content/v1/65a6654f64932547f4cbac64/d51ec273-199a-4394-b44c-f4e64b157b01/logo_transp_white.png);
}

.light .burger-inner.header-menu-icon-doubleLineHamburger .top-bun {
  background-color: #2A282F !important;
}

.black .burger-inner.header-menu-icon-doubleLineHamburger .top-bun {
  background-color: #FFFFFF !important;
}

.light .burger-inner.header-menu-icon-doubleLineHamburger .bottom-bun {
  background-color: #2A282F !important;
}

.black .burger-inner.header-menu-icon-doubleLineHamburger .bottom-bun {
  background-color: #FFFFFF !important;
}

 

Captura de ecrã 2024-06-06, às 13.13.02.png

Edited by VitorAlmeida
Link to comment
  • Replies 1
  • Views 155
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

It's not something that can be done just with css.

It requires javascript. An intersection observer would trigger a function when the header passes over each section. The function would modify the colours of the header based on whatever rules you decide upon. 

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

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.