I've written this code snippet (below) that generates a hamburger icon on mobile devices. When the user clicks it, a wave effect appears and covers everything on the screen, but I'm facing an issue where the wave can't cover the Brand section.
My query is how can I make the Brand disappear under the wave?
Alternatively,
How can I ensure that the space below the Brand and the hamburger icon also disappears under the wave effect?
Here's the link to 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>