Как заставить div придерживаться своей позиции при изменении размера?

Question

Минимальный пример для codepen

Я сделал заголовок для своего сайта, и в мобильном представлении у меня есть значок гамбургера, который показывает навигацию при нажатии.

I позиционировал этот значок для выравнивания с lo go. Когда я нажимаю на lo go, размер заголовка изменяется, чтобы показать навигацию, но я не хочу, чтобы моя иконка двигалась. К сожалению, я установил его позицию (абсолютную) сверху: 50%; transform: translateY (-50%); центрировать его, и оно следует за изменением высоты его родителя.

Есть ли способ сделать его привязанным к своему положению в чистом CSS? С помощью Js я могу вычислить координаты lo go и установить свойство top с этим значением, но я действительно не хочу использовать Js для этого.

$(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

Попробуйте просто изменить это в #hamburger_icon, добавив атрибут top:

&.active {
   transform: rotate(90deg); 
   top: 0;
}