hamburger menu with image slider

Question

I create Navarro with the carousel image slider but when i click to the hamburger the image do not disappear, I do not why. I put the code in the demo can you please see and you can understand what I mean and if you can help me to solve this problems. Thank you

 const hamburger = document.querySelector(".hamburger"); const navLinks = document.querySelector(".nav-links"); const links = document.querySelectorAll(".nav-links li"); hamburger.addEventListener("click", () => { navLinks.classList.toggle("open"); links.forEach(link => { link.classList.toggle("fade"); }); });

 * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: sans-serif; } nav { height: 10vh; background: #5b78c7; }.nav-links { display: flex; list-style: none; width: 50%; height: 100%; justify-content: space-around; align-items: center; margin-left: auto; }.nav-links li a { color: white; text-decoration: none; font-size: 16px; }.landing { height: 90vh; display: flex; justify-content: center; align-items: center; }.landing h1 { margin: 100px; font-size: 50px; color: #ae5fce; } @media screen and (max-width: 768px) {.line { width: 30px; height: 3px; background: white; margin: 5px; } nav { position: relative; }.hamburger { position: absolute; cursor: pointer; right: 5%; top: 50%; transform: translate(-5%, -50%); z-index: 2; }.nav-links { position: fixed; background: #5b78c7; height: 100vh; width: 100%; flex-direction: column; clip-path: circle(100px at 90% -10%); -webkit-clip-path: circle(100px at 90% -10%); transition: all 1s ease-out; pointer-events: none; }.nav-links.open { clip-path: circle(1000px at 90% -10%); -webkit-clip-path: circle(1000px at 90% -10%); pointer-events: all; }.landing { flex-direction: column; }.nav-links li { opacity: 0; }.nav-links li a { font-size: 25px; }.nav-links li:nth-child(1) { transition: all 0.5s ease 0.2s; }.nav-links li:nth-child(2) { transition: all 0.5s ease 0.4s; }.nav-links li:nth-child(3) { transition: all 0.5s ease 0.6s; } li.fade { opacity: 1; } }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <nav> <div class="hamburger"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> <ul class="nav-links"> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Projects</a></li> </ul> </nav> <section class="landing"> <img src="./circles.svg" alt="dots" /> <h1>Dots</h1> <div class="container-fluid px-0"> <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner bg-info" role="listbox"> <div class="carousel-item active"> <div class="d-flex align-items-center justify-content-center min-vh-100"> <h1 class="display-1">ONE</h1> </div> </div> <div class="carousel-item"> <div class="d-flex align-items-center justify-content-center min-vh-100"> <h1 class="display-1">TWO</h1> </div> </div> <div class="carousel-item"> <div class="d-flex align-items-center justify-content-center min-vh-100"> <h1 class="display-1">THREE</h1> </div> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </section> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Answer 1

Apply z-index update following css z-index: 1; .

.nav-links {
    position: fixed;
    background: #5b78c7;
    height: 100vh;
    width: 100%;
    flex-direction: column;
    clip-path: circle(100px at 90% -10%);
    -webkit-clip-path: circle(100px at 90% -10%);
    transition: all 1s ease-out;
    pointer-events: none;
    z-index: 1;
}