0

So this is my header:

<header id="nav-bar" class="container">
    <div id="nav-bar__logo">
        <a href="#"><img src="logo.png"></a>
        <input type="checkbox" id="menu">
        <label for="menu"></label>
    </div>
    <nav id="nav-bar__items">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

On input:checked, I want to do stuff with #nav-bar__items. Is it possible to do that using CSS combinators?

srt1104
  • 959
  • 7
  • 11
  • @srt1104, no but you could move the checkbox to be direct child of the `#nav-bar` element (*if you could make it invisible, and style the label accordingly*). Then you could use the `#menu:checked ~ #nav-bar__items ...` – Gabriele Petrioli Nov 10 '20 at 08:29
  • @GabrielePetrioli The problem is, on desktop page, logo and menu items should be on the same line but on mobile page, the logo and menu icon should be on the same line at opposite corners and the menu items should drop down which has the width of the whole page. Is there an easy way to accomplish that or do I have to go for grid? – srt1104 Nov 10 '20 at 08:34
  • 1
    The css approach to use is irrelevant to the checkbox issue. You can do what you want with many ways. Media queries and flex, grid, float, absolute/fixed positioning are all alternatives that can work. – Gabriele Petrioli Nov 10 '20 at 08:49

0 Answers0