Unable to click links on header after scrolling pass the first section using fullpage.js

Question

I've set up a header outside the fullPage div but I am only able to click or even hover on the links in my header if it is on the first section. Once i'm past that everything in the header is inaccessible.

I've tried making the position of the header fixed like suggested in the docs but after that I can't access the links no matter where I am.

This is the header along with the css that applies to it. It is directly above the fullPage div.

.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
  background-color: #333;
}

.logo {
  color: white;
}

.nav_links {
  list-style: none;
  display: flex;
}

.nav_links li {
  padding: 0px 20px;
}

.nav_links li a {
  transition: color 0.3s ease 0s;
}

.nav_links li a:hover {
  color: rgb(108, 212, 34);
}

.nav_links a {
  font-weight: 500;
  color: #edf0f1;
  text-decoration: none;
}

    <div class="header">
        <div class="logo">DMB</div>
        <div class="nav">
            <ul class="nav_links">
                <li><a href="https://www.linkedin.com/in/demarcus-brown-9090a3243/" target="_blank" rel="noopener noreferrer">LinkedIn</a></li>
                <li><a href="https://github.com/demarcusmb" target="_blank" rel="noopener noreferrer">GitHub</a></li>
            </ul>
        </div>
    </div>

Answer 1

Sounds like you might be missing the z-index property on your header style.

Try adding z-index: 999999;