Fullpage.js: change color of navigation dots depending on section background

[rslcdmc]

Hi,
i would like to change the color of the dots, depending on the section background.
Let's say I have an extra class "dark" for the section, which means there is a dark background.
In this case, I want to have the dots white instead of black.

How would I achieve that?

[alvarotrigo]

Easy! :)
You can make use of fullPage.js state classes or callbacks for that.
Check this video tutorial I did regarding css3 conditions based on fullpage.js state classes.

Same you can apply for changing the color of the nav. For example:

.fp-viewing-section1 #fp-nav ul li a span{
     background: red;
}
.fp-viewing-section2 #fp-nav ul li a span{
     background: blue;
}

[ananyalohani]

I think you meant .fp-viewing-1, .fp-viewing-2 and not .fp-viewing-section-1. Just mentioning this to prevent confusion in the future :)

[alvarotrigo]

I think you meant .fp-viewing-1, .fp-viewing-2 and not .fp-viewing-section-1. Just mentioning this to prevent confusion in the future :)

That depends on the anchors you select for your sections.
But yeah, those would be the default ones if you do not use the attribute data-anchor on your sections or the fullpage option anchors.

Thanks for pointing that out @ananyalohani ! 👍