Не выплывает бургер

Question

Пытаюсь сделать бургер чисто на CSS без JS - в вакууме всё получается, но если добавить какой-то доп. код для стилизации на более широком экране и лого, то список не вылетает. В песочнице первый вариант - работающий, второй с какой-то загвоздкой. Помогите, пожалуйста!!

https://codepen.io/Liturtle/pen/BamGbJm?editors=1100

.burger-list {
    white-space: wrap;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: translateY(100%);
    max-height: 0;
    font-size: 0;
    overflow: hidden;
    transition: 0.5s all; 
  }
  #check-burger:checked ~ .burger-list {
    max-height: 500px;
    font-size: 16px;
  }

Answer 1

<body>
<!--ПЕРВОЕ МЕНЮ. РАБОТАЕТ -->
<header class="menu">
    <input type="checkbox" id="burger-check">
    <label for="burger-check">Nav</label>
    <div class="burger-line first"></div>
    <div class="burger-line second"></div>
    <div class="burger-line third"></div>
    <div class="burger-line fourth"></div>
    <nav class="menu__list">
        <a href="#" class="menu__item">Main</a>
        <a href="#" class="menu__item">Menu</a>
        <a href="#" class="menu__item">Contacts</a>
        <a href="#" class="menu__item">Reviews</a>
    </nav>
</header>


<!--ВТОРОЕ МЕНЮ. НЕ РАБОТАЕТ -->
<header>
    <div class="container">
        <div class="header__logo">
            <img class="logo" src="https://i116.fastpic.org/big/2022/0216/16/191dac288c94734317ad1d18d0185c16.png" alt="Alivio">
        </div>
        <div class="header__btn burger-list">
            <a class="header__sign sign-in burger-item" href="#">Sign in</a>
            <a class="header__sign sign-out burger-item" href="#">Start Trial</a>
        </div>
        <input type="checkbox" id="check-burger">
        <label for="check-burger"></label>
        <div class="burger_line first-line"></div>
        <div class="burger_line sec-line"></div>
        <div class="burger_line third-line"></div>
        <div class="burger_line fourth-line"></div>
        <nav class="header__nav burger-list">
            <a class="header__a burger-item" href="#">Why Alivio</a>
            <a class="header__a burger-item" href="#">Solutions</a>
            <a class="header__a burger-item" href="#">Community</a>
            <a class="header__a burger-item" href="#">Pricing</a>
        </nav>
    </div>
</header>

burger-list должен находиться после самого бургера тогда правило #check-burger:checked ~ .burger-list отработает Про селекторы

БЛОГ НА HUSL

Не выплывает бургер

Ответы (1 шт):