如何应用：checked在多个元素上？

Question

我正在尝试创建一个下拉菜单，但：checked仅影响其中之一。 基本上我希望当我检查输入内容时，导航会改变，标题也会改变

<header>
        <div class="container logo"><a class="noselect" href="{{route('index')}}">LOGO</a></div>
        <input id="hamburger" class="openmenu" type="checkbox">
        <label for="hamburger" id="hamburgerlabel">
            <div class="iconupper"></div>
            <div class="icon"></div>
            <div class="iconlower"></div>
        </label>
        <nav>
            <li><a class="noselect" href="{{route('projects')}}"><h4>PROYECTOS</h4></a></li>
            <li><a class="noselect" href="{{route('contact')}}"><h4>CONTACTO</h4></a></li>
            <li><a class="noselect" href="{{route('about')}}"><h4>SOBRE NOSOTROS</h4></a></li>
            <li><a class="noselect" href="{{route('login')}}"><h4>LOGIN</h4></a></li>
        </nav>
    </header>

#hamburger[type=checkbox]:checked ~ nav { 
        height: 50px;
        opacity: 1;
    }

    #hamburger[type=checkbox]:checked header { 
        height: 50px;
    }