Sticky Nav background colour
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
-
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 }
Please sign in to leave a comment.
Comments
1 comment