I have a problem making the hamburger menu sticky. So the hamburger icon is in the corner when i scroll down, but the menu stays in the same position(at the top of the page), so I have to scroll back up again to look at it. I got the code from codepen, i tried adjusting the code, but didnt figure out how.
If you want to view where i got the code from here is the link, but it is not necessary in my opinion for i only removed code that wasnt related to the hamburger menu: https://codepen.io/CopyPasteLtd/pen/BaxQeGw
See the 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>