Navbar colour change on scroll

Design help General
1

Hi All,

I’m still getting to grips with Webflow and need a bit of help with interactions. Any pointers would be appreciated.

Essentially i’m looking to change the navbar colour in each section of my single page website. The reason for this is to give each block its own colour theme - e.g. changing the navbar to suit the graphics and icons of the section.

I’m getting to grips with ‘interactions’ but cannot see anything for colour. does anyone know how this might be done?

Many thanks and Merry Christmas!

2

I think you basically have two options.

  1. Write your own custom code that detects the scroll and changes the navbar color
  2. Make a different navbar for each section/color and then when the scroll triggers you display:none on the previous one and display:block on the next one with no delay so that hopefully it just looks like they swap.
3

Hmm… I like the second option. I’ll give it a try and post some feedback. Thanks!!

4

I would try to transition the opacity between of a set of background colors nested in a div. Nest the menu nav inside the div and set its background to transparent so that your background div shows through.

5

Great Stuff!

after lots and lots of clicking I’ve finally managed to accomplish a colour changing but tasteful navbar… thanks so much @vlogic & @termhn!

I’m close to finishing the entire website and shall post a link + description of the final technique used.

Happy New Year!

1 Like