Menu gets hidden behind sections when scrolling

[Visiting4776]

The menu doesn't stay in place at the top of the site, but rather disappears when you scroll down. Still, there is an offset for the slides, but the menu isn't there. If you set the visibilty of the sections to hidden you can see that the menu is still there, it's just not being displayed. Example:

<ul id="menu">

    <li><a href="#firstPage">firstPage</a></li>

    <li><a href="#secondPage">secondPage</a></li>

    <li><a href="#thirdPage">thirdPage</a></li>

</ul>

<div id="fullpage">

  <div class="section">Some section</div>

  <div class="section">Some section</div>

  <div class="section">Some section</div>

</div>

$(document).ready(function() {

$('#fullpage').fullpage({

    scrollingSpeed: 300,

    menu: '#menu',

    anchors:['firstPage', 'secondPage', 'thirdPage']

});

});

.section{ background-color: olive; } .section:nth-child(2n){ background-color: orange; }

That way, the menu stays in place, but is overlaid when scrolling down.

[Visiting4776]

@alvarotrigo do you have any idea what could cause this issue? This is really important. I can hack the navigation to show up by manually setting the z-index of the sections to -1 but this causes all sorts of other problems.

[alvarotrigo]

That's a css question not a fullpage.js one.
Please see the available examples or ask in other place such as stackoverflow.

[Visiting4776]

l0l