Sticky navbar dynamic text colour change


#1

Hi,
I have sticky navigation bar with transparent background and through sticky-nav.sticky class I used effect of darkening its background when you scroll down through page. When navbar is on its top position and transparent, text inside navbar is in black colour.
And here I want to achieve following:
When I scroll down and background of navbar changes do daren, I would like text inside navbar to change colour to white.

Test .bloc file:
https://mega.nz/#!0nxynLgB!2JQQOFfvqYnn6vrBH1I5aHx8rTdPffoXMSl7SDJinYg

Thanks for help


#2

Hi @DGT

Create the class “sticky-nav.sticky .navbar a” and choose "No, leave spaces intact"
Then set the color of the text to white.

Cheers


#3

Thank you sir :+1:


#4

Just one issue appeared, white dropdown menu:

Is there way to fix that?

Thanks


#5

Yes there is!

Create the class “navbar-nav .open .dropdown-menu > li > a” and again use "No, leave spaces intact"
Set the color you want for the links in the drop down menu.

Cheers :sunglasses:


#7

Thank you, this works too! But one last step in this…

Is it possible to make it work same way as the navigation bar? - At top transparent with black text, on scroll darken with white text :angel: