Sticky Nav background colour

Follow

NeilUK

• June 25, 2019 10:00

I've been trying, unsuccessfully, to create a sticky nav menu that changes background colour on scroll.

I have a banner image so the menu is transparent, but I'd like the nav to change background colour when the user scrolls down the page.

I can achieve the effect using Tav's Chroma stacks, but I'd like to keep things as UIkit as possible.

I did look at the video where inverse it used, but it appears to use the background colour of the container below it only.

Here's a short video of the effect I'd like, which is currently set up using Chroma and the UIkit nav stack.

Any ideas?

Thanks

0

• 

  Lucas Tsolakian

  • June 26, 2019 16:19
  • Edited

  Sorry for the delay!

  I've using this one in the Kiddo project here: https://uikitstacks.com/projects/kiddo/

  Currently there's not option for that, I may add one in a future revision, but here's a way of making it yourself with a bit of CSS: You can add a rule for the Sticky (I guess the Navbar is into a Sticky right?) when it's not active, or when it's active too...example:

  .uk-sticky.uk-active { background: white }

  0

  Comment actions Permalink

Please sign in to leave a comment.