How can i make my header not move along with my slides in fullpagejs

Question

I created a slide in fullpagejs but the header moves along with the slide which isnt good. How can i make the header continue to appear within the background image/slides without moving with the slides?

If i take the header out of the background section it stays while the slide moves, but it then creates a white space at the top which i dont want. I've tried to fix it with position absolute and relative but none seem to work need help.

      $(document).ready(function(){

//  $('#fullpage').fullpage({
//     sectionSelector: '.vertical-scrolling',
//     slideSelector: '.horizontal-scrolling',
//     controlArrows: false
//     // more options here
// });


// variables
var $header_top = $('.header-top');
var $nav = $('nav');



// toggle menu 
$header_top.find('a').on('click', function() {
  $(this).parent().toggleClass('open-menu');
});



// fullpage customization
$('#fullpage').fullpage({
  sectionsColor: ['firstSection'],

  loopBottom: false,
  afterRender: function () {
    setInterval (function () {
        $.fn.fullpage.moveSlideRight ();
    }, 5000);
  },
  // sectionSelector: '.vertical-scrolling',
  // slideSelector: '.horizontal-scrolling',
  navigation: true,
  slidesNavigation: true,
  controlArrows: false,

  
    

  afterLoad: function(anchorLink, index) {
    $header_top.css('background', 'rgba(0, 47, 77, .3)');
    $nav.css('background', 'rgba(0, 47, 77, .25)');
    setInterval(function() {
        $.fn.fullpage.moveSlideRight();
    }, 5000);
    if (index == 1) {
        $('#fp-nav').hide();
      }
  },

  
}); 
});

#homepage {
  position: relative; }
  #homepage .slider {
    background-size: cover !important; }
    #homepage .slider .hero {
      padding: 0 25px;
      display: flex;
      flex-direction: column;
      height: calc(100vh - 10%); }
      #homepage .slider .hero .header {
        padding-top: 20px;
        flex: 1 1 70px;
        display: flex;
        align-items: center;
        justify-content: space-between; }
        #homepage .slider .hero .header .logo img {
          cursor: pointer;
          image-rendering: -webkit-optimize-contrast; }
        #homepage .slider .hero .header i {
          color: #fff;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>

<div class="container">
            <div id="homepage" class="main">
                <div id="fullpage">
                <section class="section">
                    <section class="slider slide"  style="background: url('http://neonrobot.com/wp-content/uploads/2014/09/unsplash-1.jpg') center center;">
                        <div class="hero">
                            <div class="header">
                                <div class="logo"><img src="assets/img/logo.png"></div>
                                <i id="menu-open" class="fa fa-bars fa-lg"></i>
                            </div>
                            <div class="welcome">
                                <div>
                                    <div class="hero-headings">Hello.</div>
                                    <div class="hero-description"></div> 
                                </div>
                            </div>
                        </div>
                        <div class="clients">
                            <div class="padding25">
                                <div class="clients-intro">Our Clients. &nbsp; <i class="fa   fa-angle-right"></i><i class="fa   fa-angle-right"></i></div>
                                <div class="clients-logos">sds</div>
                            </div>
                        </div>
                    </section>
                    <section class="slider slide" style="background: url('http://neonrobot.com/wp-content/uploads/2014/09/unsplash-1.jpg') center center;">
                        <div class="hero">
                            <div class="header">
                                <div class="logo"><img src="assets/img/logo.png" alt="logo"></div>
                                <i id="menu-open" class="fa fa-bars fa-lg"></i>
                            </div>
                            <div class="welcome">
                                <div>
                                    <div class="hero-headings">Hello.</div>
                                    <div class="hero-description"></div> 
                                </div>
                            </div>
                        </div>
                        <div class="clients">
                            <div class="padding25">
                                <div class="clients-intro">Our Clients. &nbsp; <i class="fa   fa-angle-right"></i><i class="fa   fa-angle-right"></i></div>
                                <div class="clients-logos">sds</div>
                            </div>
                        </div>
                    </section>
                </section>

                </div>
            </div>
        </div>

Answer 1

#1

What about header like menu from fullpage.js main page?

I've added this:

<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>

and some of css:

#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;
}

You can try it here. It looks more simpler because I missed some part of css, but I think you will get the idea.

#2

I'm not sure that it is documented behavior but I found another more simpler option - just add this:

<div class="fp-slidesNav top" style="color:white">
  Header
</div>

right after <section class="section">. Try it here.