Slider/scrolling navigation - excluding sections from nav and changing nav color over sections

Question

Hi I'm currently using fullpage.js and wanted to use the fixed "slider" nav (with the dots on the right), but have two issues I'm trying to solve.

1. How do I make only certain sections appear as items/links in the nav and not every section (which it currently picks up on)? Basically, I have a "title slide" every 3-4 section of the page and only want these sections to appear in the nav, not all of the sections in between. Is it possible to create some variable to use as target ? Or does somebody know of an alternative slideNav that allows this behaviour?

    function addVerticalNavigation(){ $body.append('<div id="' + SECTION_NAV + '"><ul></ul></div>'); var nav = $(SECTION_NAV_SEL); nav.addClass(function() { return options.showActiveTooltip ? SHOW_ACTIVE_TOOLTIP + ' ' + options.navigationPosition : options.navigationPosition; }); for (var i = 0; i < $(SECTION_SEL).length; i++) { var link = ''; if (options.anchors.length) { link = options.anchors[i]; } var li = '<li><a href="#' + link + '"><span></span></a>'; 

2. I want to differ the colour of the nav (white or black) depending on the specific section background color. I found a code snippet which would help me achieve this for a fixed nav bar... Make Header/Navigation change colour when on different section of the website ...however it's targeting html/a nav 'div' which doesn't exist for slidesNav... From what I can see that's the case with a lot of these jquery slider navs. Could somebody suggest a workaround, or know of one which does contain html?

Answer 1

1- Possibly the easiest way is to create your own navigation system and use the fullpage.js callbacks or the state classes to style the active one. Check this answer .

2- Just overwrite the active class for the element and use a different color.

#fp-nav ul li:nth-child(1) a.active span, 
#fp-nav ul li:nth-child(1):hover a.active span{
    background:blue;
}
#fp-nav ul li:nth-child(2) a.active span, 
#fp-nav ul li:nth-child(2):hover a.active span{
    background:red;
}

Demo online