CODEWITHSUNDEEP
javascriptjqueryfullpage.js
ChrisNix
ChrisNix

Reputation: 47

fullPage.js and fixed navigation - want to highlight active page in nav

I'm trying out fullPage.js and want to use a fixed navigation with it.

How can I change the color of the nav anchors so that you can see on what page you actually are?

As I've seen, fullPage.js adds an active class to the section (page) that's active. But how to connect that to my nav a's?

I tried some jQuery, but nothing worked so far. Seems like .css() doesn't override my old values.

Here's what I got:

HTML

html
  head
    title CSS Test

    script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js")

    link(href="css/styles.css" rel="stylesheet")

  body
    nav
      a.(href="#page1") B4D455
      ul
        li
          a(href="#page2") Page2
        li
          a(href="#page3") Page3
        li
          a(href="#page4") Page4

    .main
      .section.page1#page1

      .section.page2#page2

      .section.page3#page3

      .section.page4#page4

  script(src="js/jquery.easings.min.js")
  script(src="js/scrolloverflow.min.js")
  script(src="js/jquery.fullPage.js")
  script(src="js/main.js")

and my JS

$(document).ready(function() {
  $('.main').fullpage();
});

Upvotes: 1

Views: 1960

Answers (1)

adriennetacke
adriennetacke

Reputation: 1746

Since fullpage.js already adds the "active" class to your sections based on your data anchors, you just need to add some CSS code to work with it.

Essentially, something like this: 

.your-nav-class a:active {
    background-color: #B4D455;
}

Also, if you are talking about highlighting your navigation menu anchors based on what section you are on, also ensure you utilize fullpage.js's menu option. Here's the example from the docs:

JS:

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    menu: '#myMenu'
});

HTML: 

<ul id="myMenu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
    <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
    <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>

Upvotes: 3

Related Questions