As I work on creating a hamburger icon, I am faced with the challenge of accurately positioning the bars without guessing. The height of the hamburger is 24px, and I initially thought placing the middle bar at half the height (12px or top: 12px) would center it. However, upon testing, using a top value of 10px or 0.625em seems to align it better within the overall menu.
What is a more effective method for calculating positions in CSS?
Check out this code snippet for reference.
<div class="hamburger">
<div class="hamburger__top"></div>
<div class="hamburger__middle"></div>
<div class="hamburger__bottom"></div>
</div>
SASS
.hamburger {
position: relative;
width: 3em;
height: 1.5em;
cursor: pointer;
div {
background-color: red;
position: absolute;
width: 100%;
height: .25em;
}
&__top {
top: 0;
}
&__middle {
background-color: green;
top: 0.5em;
}
&__bottom {
bottom: 0;
}
}