After adding a hamburger icon to my web project, I noticed that whenever I click on the icon, it scrolls back to the top of the page. I tried adjusting the margin and padding properties, but it still behaves the same way. Even after removing the animation from the hamburger icon, the issue persists. Is there something wrong with my implementation?
Here is the link to the hamburger icon I used in my project (the first one):
https://codepen.io/rosalieelphick/pen/xJyRoK
HTML
<input type="checkbox" id="checkbox1" class="checkbox1 visuallyHidden" onclick="betterwork()">
<label for="checkbox1" id="label">
<div class="hamburger hamburger1">
<span class="bar bar1"></span>
<span class="bar bar2"></span>
<span class="bar bar3"></span>
<span class="bar bar4"></span>
</div>
</label>
CSS
.visuallyHidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
#label {
top: 0;
position: absolute;
}
.hamburger {
margin: 0;
margin-top: 20px;
left: 20px;
width: 30px;
height: 30px;
position: fixed;
z-index: 3;
}
.hamburger:hover {
cursor: pointer;
}
.hamburger .bar {
padding: 0;
width: 30px;
height: 4px;
background-color: maroon;
display: block;
border-radius: 4px;
transition: all 0.4s ease-in-out;
position: absolute;
}
.bar1 {
top: 0;
}
.bar2,
.bar3 {
top: 13.5px;
}
.bar3 {
right: 0;
}
.bar4 {
bottom: 0;
}
.checkbox1:checked + label > .hamburger > .bar1{
transform: rotate(45deg);
transform-origin: 5%;
}
.checkbox1:checked + label > .hamburger > .bar2 {
transform: translateX(-40px);
background-color: transparent;
}
.checkbox1:checked + label > .hamburger > .bar3 {
transform: translateX(40px);
background-color: transparent;
}
.checkbox1:checked + label > .hamburger > .bar4 {
transform-origin: 5%;
transform: rotate(-45deg);
width: 41px;
}