Sticky navbar dynamic text colour change

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

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

2 Likes

Thank you sir :+1:

1 Like

Just one issue appeared, white dropdown menu:

Is there way to fix that?

Thanks

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:

2 Likes

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:

Hi!

First question from me here, love working with Blocs but now I run in this too and see there is no answer yet on the dropdown having the same behaviour as the menu bar on scroll?

I start with transparent menu background on scroll going to black background, and would love to have the dropdown behaving like that too :slight_smile:

Didn’t find a proper solution yet myself :frowning:

Just change the opacity of the .dropdown-menu class.

1 Like

Big thanks for the reply!

Got so far before but that doesn’t work for me when I scroll and the menubar’s initial (before scroll) transparent style is the same as the transparent dropdown style, the menubar style changes to black but dropdown style stays transparent :frowning:

Set up a class that targets the sticky nav being applied.

I’m not on my Mac, but it would be something like…

.sticky-nav.sticky .dropdown-menu

(Preserve space).

2 Likes

Awesome!

Took some tweaking but that was the missing part :slight_smile: Got inverted results at first, but after setting .dropdown-menu to transparent and .sticky-nav.sticky .dropdown-menu to black backgrounds now all is good, works like a charm!

Thanks!