title: fullPage.js and fixed navigation - want to highlight active page in nav
body: <p>I'm trying out fullPage.js and want to use a fixed navigation with it.</p>
  
  <p>How can I change the color of the nav anchors so that you can see on what page you actually are?</p>
  
  <p>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? </p>
  
  <p>I tried some jQuery, but nothing worked so far. Seems like .css() doesn't override my old values.</p>
  
  <p>Here's what I got:</p>
  
  <p>HTML</p>
  
  <pre><code>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")
  </code></pre>
  
  <p>and my JS</p>
  
  <pre><code>$(document).ready(function() {
    $('.main').fullpage();
  });
  </code></pre>