Having trouble with the hamburger menu staying sticky? The hamburger icon remains in the corner as you scroll down, but the menu stays fixed at the top of the page, making it hard to access. You tried tweaking the code you found on Codepen, but couldn't get it to work.
If you want to check out the original code on Codepen, here is the link: https://codepen.io/CopyPasteLtd/pen/BaxQeGw
Take a look at the code snippet below.
const toggleButton = document.querySelector('.toggle-menu');
const navBar = document.querySelector('.nav-bar');
toggleButton.addEventListener('click', () => {
navBar.classList.toggle('toggle');
});@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400&display=swap');
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
font-size: 10px;
}
.container {
width: 100%;
height: 100vh;
/* background: linear-gradient(-45deg, #ee7752, #e73c7e);
background-size: 400% 400%; */
position: relative;
}
.nav-bar {
position: absolute;
background-color: #122;
top: 0;
left: -25rem;
height: 100vh;
width: 25rem;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s ease-out;
}
.toggle {
left: 0;
box-shadow: 1px 0 15px 2px rgba(0, 0, 0, 0.4);
}
.toggle-menu {
background-color: rgba(0, 0, 0, 0.2);
position: fixed;
top: 2rem;
left: 2rem;
width: 4rem;
height: 3rem;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 0.2rem 0.5rem;
border-radius: 0.5rem;
}
.line {
width: 100%;
height: 4px;
border-radius: 5px;
background-color: #fff;
transition: 0.4s ease-out;
}
.toggle .line1 {
background-color: #c91919;
transform: scale(0.9) rotateZ(-45deg) translate(-6px, 4px);
}
.toggle .line2 {
display: none;
}
.toggle .line3 {
background-color: #c91919;
transform: scale(0.9) rotateZ(45deg) translate(-6px, -4px);
}
.toggle .toggle-menu {
background-color: white;
}
.nav-list {
list-style: none;
}
.nav-list-item {
text-align: center;
padding: 1rem 0;
}
.nav-link {
color: #fff;
font-size: 2.2rem;
text-decoration: none;
position: relative;
padding-bottom: 0.4rem;
}
.nav-link::before {
position: absolute;
content: '';
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #fff;
transform: scaleX(0);
transition: 0.4s ease-in-out;
transform-origin: left;
}
.nav-link:hover::before {
transform: scaleX(1);
}<div class="container">
<nav class="nav-bar">
<div class="toggle-menu">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
</div>
<ul class="nav-list">
<li class="nav-list-item"><a href="" class="nav-link">Home</a></li>
<li class="nav-list-item"><a href="" class="nav-link">About</a></li>
<li class="nav-list-item">
<a href="" class="nav-link">Projects</a>
</li>
<li class="nav-list-item"><a href="" class="nav-link">Clients</a></li>
<li class="nav-list-item">
<a href="" class="nav-link">Contact Me</a>
</li>
</ul>
</nav>
</div>