#1
Have you considered incorporating a header menu similar to the one featured on fullpage.js main page?
I've implemented the following code:
<ul id="menu">
<li class="menu-active">
<a href="#" rel="noopener">
<span>Wordpress Theme</span>
</a>
</li>
<li><a href="#examples" class="show-examples">Examples</a></li>
<li>
<a rel="noopener" href="#">Docs</a>
</li>
<li id="menu-contact"><a href="#">Contact</a></li>
<li>
<a href="#" target="_blank" rel="noopener" class="twitter-share">
</a>
</li>
<li id="menu-line" style="width: 166.953px; left: 20px;"></li>
</ul>
Along with some CSS styles:
#menu {
position: fixed;
top: 20px;
right: 20px;
z-index: 70;
letter-spacing: 1px;
font-size: 1.1em;
}
#menu li {
display: inline-block;
margin: 10px 0;
}
#menu a {
color: #fff;
padding: 0 1.1em 1.1em;
}
.menu-active {
font-weight: 700;
}
Feel free to try it out here. It may appear simpler due to missing some CSS properties, but the concept is still clear.
#2
While I'm not certain if this is a documented feature, I stumbled upon a simpler alternative - just include this code:
<div class="fp-slidesNav top" style="color:white">
Header
</div>
immediately after <section class="section">. Give it a go here.