I have a problem with the menu on mobile screen

Question

I have this code(below) that makes a hamburger icon on mobile devices and when the user click it a wave appears and cover everything on the screen. but i have a problem that the wave can't cover the Brand

My question is how to make the Brand disappears under the wave?

Or

How to make the space below the Brand and the hamburger icon disappears under the wave?

This is my code: https://codepen.io/Sinano/pen/MWyprpM

 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; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #nav-bar { display: flex; justify-content: space-between; height: 9vh; background: #dfdb14!important; padding-top: 1rem; } #brand { padding-top: 0.5rem; padding-left: 4rem; } .nav-links { display: flex; list-style: none; width: 40%; height: 100%; justify-content: space-around; align-items: center; margin-left: auto; margin-right: 2rem; } .items { color: white; text-decoration: none; font-size: 16px; font-family: 'Roboto', sans-serif; } @media screen and (max-width: 768px) { .line { width: 30px; height: 3px; background: white; margin: 5px; } #brand { padding-top: 0.5rem; padding-left: 0; } #nav-bar { position: relative; padding-top: 0; } .hamburger { position: absolute; cursor: pointer; right: 5%; top: 50%; transform: translate(-5%, -50%); z-index: 2; } .nav-links { background: #5b78c7; height: 94.8vh; width: 100%; margin-right: 0; flex-direction: column; clip-path: circle(100px at 100% -18%); -webkit-clip-path: circle(100px at 100% -18%); transition: all 2s 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; } .menu { opacity: 0; } .items { font-size: 20px; } .menu:nth-child(1) { transition: all 0.5s ease 0.2s; } .menu:nth-child(2) { transition: all 0.5s ease 0.4s; } .menu:nth-child(3) { transition: all 0.5s ease 0.6s; } .menu:nth-child(4) { transition: all 0.5s ease 0.8s; } .menu:nth-child(5) { transition: all 0.5s ease 1s; } .menu.fade { opacity: 1; } } .s1 { height: 90vh; width: 100%; background: white!important; overflow: hidden; }

 <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link rel=”stylesheet” href=”css/bootstrap-responsive.css”> <link rel="stylesheet" href="css.css"> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> </head> <body> <nav id="nav-bar"> <div class="hamburger"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> <h3 id="brand">BRAND</h3> <ul class="nav-links"> <li class="menu"><a class="items" href="#">Home</a></li> <li class="menu"><a class="items" href="#">Publisher Rates</a></li> <li class="menu"><a class="items" href="#">Create Account</a></li> <li class="menu"><a class="items" href="#">Login</a></li> </ul> </nav> <section class="s1"> </section> </body>

Answer 1

Try to add this css. It positions it absolutely above the brand text.

@media screen and (max-width: 768px){
.nav-links{
    position: absolute;
}

I have a problem with the menu on mobile screen

Question

1 answers

solution1
1 ACCPTED 2020-08-25 21:38:50

I have a problem with the menu on mobile screen

Question

1 answers

solution1 1 ACCPTED 2020-08-25 21:38:50

solution1
1 ACCPTED 2020-08-25 21:38:50