Jump to content

Dynamic colour change header menu

Recommended Posts

I am currently working on a website (7.1 blank template) where I am looking for that the header navigation links to change depending on the image that they scroll over (so for example on a light image we would like the text to be black, but as soon as the image is darker for the font to change to white).

 

I have been trying to solve this with css only :

/* Nav item color */

.header-nav-item a{

  color: transparent;

  filter: invert(1) grayscale(1) contrast(9);

}

 

Or with the color-Blend mode:

/* Nav item color */

.header-nav-item a{

  color: white !important;

  mix-blend-mode: multiply;

}

 

Any help would be appreciated.

 

 

Menu light.png

Menu dark.png

Edited by Rik_Nvgtr
Link to comment
  • 1 month later...
On 9/13/2021 at 3:53 PM, Rik_Nvgtr said:

I am currently working on a website (7.1 blank template) where I am looking for that the header navigation links to change depending on the image that they scroll over (so for example on a light image we would like the text to be black, but as soon as the image is darker for the font to change to white).

 

I have been trying to solve this with css only :

/* Nav item color */

.header-nav-item a{

  color: transparent;

  filter: invert(1) grayscale(1) contrast(9);

}

 

Or with the color-Blend mode:

/* Nav item color */

.header-nav-item a{

  color: white !important;

  mix-blend-mode: multiply;

}

 

Any help would be appreciated.

 

 

Menu light.png

Menu dark.png

It may need javascript to detect the scroll position and extract the image's lumiance to change the nav color accordingly, rough plan should be

- Intersection Observer to detect scroll position

- Library such as Vibrant.js - Extract prominent colors from an image. (jariz.github.io) 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. 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.