How to make a div stick to its position when resizing? - css

Question

Minimal example on codepen
I made a header for my website, and in mobile view I have a hamburger icon that shows the nav when clicked.
I positioned this icon to be aligned with the logo. When I click on the logo, the header resizes in order to show the nav, but I don't want my icon to move. Unfortunately, I set its position (absolute) to top: 50% ; transform: translateY(-50%); to center it and it follows the height change of its parent.
Is there any way to make it sticky to its position in pure CSS? With Js I can calculate the coordinates of the logo and set the top property with this value, but I don't really want to use Js for this.
$(document).ready(function() {
$('#hamburger').click(function(){
$('#hamburger').toggleClass('active');
$('#hamburger_icon').toggleClass('active');
$('#nav').toggleClass('active');
});
});
body {
padding: 0px;
margin: 0px;
}
a {
text-decoration: none;
color: inherit;
}
ul {
padding: 0px;
margin: 0px;
}
header {
position: relative;
padding-left: 0px;
padding-right: 0px;
width: 100%;
box-sizing: border-box;
background-color: white;
box-shadow: 0 3px 28px rgba(0, 0, 0, 0.15);
}
header div {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
header div svg {
margin-top: 0.5em;
margin-bottom: 0.5em;
height: 50px;
position: relative;
}
header div ul {
list-style: none;
text-decoration: none;
display: flex;
font-size: 0.8em;
max-height: 0px;
overflow: hidden;
transition: all ease-out 0.2s;
}
header div ul.active {
max-height: 200px;
margin-top: 0.6em;
margin-bottom: 0.6em;
}
header div ul li {
margin-right: 1em;
margin-left: 1em;
position: relative;
}
header #hamburger {
top: 50%;
transform: translateY(-50%);
right: 2.5em;
position: absolute;
height: 1.6em;
width: 1.6em;
padding: 0.2em;
}
header #hamburger #hamburger_icon {
top: 50%;
transform: translateY(-50%);
position: relative;
display: block;
background-color: black;
height: 0.1em;
width: 100%;
border-radius: 1.5px;
transition: all ease-out 0.2s;
}
header #hamburger #hamburger_icon::before, header #hamburger #hamburger_icon::after {
content: "";
display: block;
background-color: black;
height: 0.1em;
width: 100%;
border-radius: 1.5px;
transition: all ease-out 0.2s;
position: absolute;
}
header #hamburger #hamburger_icon::before {
top: -0.4em;
}
header #hamburger #hamburger_icon::after {
top: 0.4em;
}
header #hamburger #hamburger_icon.active {
transform: rotate(90deg);
}
header #hamburger #hamburger_icon.active::before, header #hamburger #hamburger_icon.active::after {
width: 40%;
}
header #hamburger #hamburger_icon.active::before {
transform: rotate(-45deg);
top: -0.25em;
}
header #hamburger #hamburger_icon.active::after {
transform: rotate(45deg);
top: 0.25em;
}
#main_logo {
fill: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="header_content">
<svg class="flex_elem" id="main_logo" version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1733.000000 1964.000000" preserveAspectRatio="xMidYMid meet">
<g id="the_logo" transform="translate(0.000000,1964.000000) scale(0.100000,-0.100000)" stroke="none">
<path d="M8530 19634 c-148 -23 -272 -60 -380 -114 -97 -48 -7567 -4361 -7644 -4413 -32 -22 -92 -72 -134 -111 -209 -197 -336 -464 -362 -760 -13 -152 -13 -8680 0 -8832 26 -297 153 -562 362 -760 42 -39 102 -90 135 -112 110 -75 7618 -4405 7693 -4437 304 -130 662 -126 955 9 39 18 994 565 2121 1216 1127 650 2144 1237 2259 1303 116 66 224 130 242 143 39 30 68 100 60 150 -7 41 -517 934 -558 976 -32 32 -96 53 -141 44 -18 -3 -121 -57 -228 -119 -1511 -877 -4229 -2441 -4241 -2441 -9 -1 -1661 949 -3672 2109 l-3656 2110 0 4225 0 4225 3627 2093 c1995 1151 3643 2103 3664 2114 l36 21 3661 -2114 3661 -2113 0 -3683 0 -3683 -22 -4 c-36 -8 -4419 -417 -4459 -416 -43 0 -96 33 -121 75 -14 25 -89 788 -447 4590 -237 2508 -436 4580 -441 4605 -32 135 -169 240 -312 240 -27 0 -286 -22 -576 -50 -520 -49 -528 -50 -589 -80 -34 -17 -76 -47 -94 -67 -44 -51 -80 -132 -85 -195 -2 -30 220 -2422 499 -5374 471 -4974 505 -5324 525 -5357 27 -42 75 -67 132 -67 92 0 6739 630 6800 645 138 33 290 127 375 233 60 74 122 202 140 288 13 60 15 632 15 4276 0 2940 -3 4230 -11 4284 -44 321 -236 630 -499 806 -83 55 -7533 4359 -7638 4412 -81 41 -218 84 -322 101 -86 13 -265 18 -330 9z"/>
<path d="M6340 15539 c-639 -47 -1156 -179 -1531 -391 -608 -343 -907 -961 -989 -2048 -18 -234 -24 -904 -11 -1270 49 -1417 248 -3459 462 -4735 145 -867 296 -1410 509 -1836 293 -584 673 -894 1252 -1023 393 -87 922 -95 1468 -20 272 37 631 120 881 204 263 89 340 135 354 213 3 18 -19 287 -49 599 -59 617 -58 613 -122 650 -49 28 -96 25 -284 -19 -673 -160 -1283 -194 -1618 -92 -415 128 -606 509 -766 1529 -134 852 -337 2837 -426 4170 -78 1168 -59 1639 80 1998 103 267 305 417 690 513 280 69 560 92 1075 87 363 -3 393 -2 418 15 43 28 67 75 67 132 0 28 -23 295 -51 595 -55 587 -56 595 -117 636 -51 35 -291 74 -582 94 -165 11 -554 11 -710 -1z"/>
</g>
</svg>
<ul class="flex_elem" id="nav">
<li class="nav-item"> <a class="nav-link menu_link" href="#">ITEM1</a> </li>
<li class="nav-item"> <a class="nav-link menu_link" href="#">ITEM2</a> </li>
<li class="nav-item"> <a class="nav-link menu_link" href="#">ITEM3</a> </li>
<li class="nav-item"> <a class="nav-link menu_link" href="#">ITEM4</a> </li>
</ul>
</div>
<div id="hamburger">
<div id="hamburger_icon"></div>
</div>
</header>
</body>

Answer 1

Try just to modify this, within #hamburger_icon, adding top attribute:
&.active {
transform: rotate(90deg);
top: 0;
}