Pseudo and Adjacent Sibling Selectors

Question

I am trying to get my menu to display when my toggle checkbox is selected however, it will not. I understand why in that my .menu-container is not a sibling of my toggle element however, I do not know how to get it to work without taking my toggle out of the div so my .menu-container directly proceeds. I am still learning Javascript (I am junior) so understand this could be done with that but CSS is the way forwards for me at the moment unless you have a simple explanation/solution with js.

I hope that makes sense.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

.nav-container {
  position: fixed;
  top: 0;
  width: 100vw;
  /*border: 1px solid red;*/
}

.toggle-container {
  display: flex;
  justify-content: flex-end;
  /*border: 1px solid blue;*/
  /*margin: 20px;*/
}

.menu-container {
  display: flex;
  justify-content: flex-end;
  margin: 20px 30px 20px 20px;
}

.menu-item {
  padding: 0 10px;
  font-size: 1.1em;
}

#toggle {
  display: none;
}

.toggle {
  display: none;
  font-size: 1.8em;
  padding: 15px 30px 10px 0;
}


/*.menu-container {
    display: flex;
    flex-direction: column;
    border: 1px solid green;
    align-items: center;
}
*/

@media only screen and (max-width: 500px) {
  .toggle {
    display: block;
  }
  .menu-container {
    flex-direction: column;
    margin: 0;
    border-top: 1px solid gray;
    display: none;
  }
  .menu-item {
    padding: 8px;
    width: 100vw;
    text-align: center;
    border-bottom: 1px solid gray;
  }
  #toggle:checked+.menu-container {
    display: block;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Bundles</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Comptible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="mynavtext.css">
  <link rel="stylesheet" href="..\fontawesome-free-5.12.1-web\css\all.css">
</head>

<body>

  <nav class="nav-container">

    <div class="toggle-container">
      <label class="toggle" for="toggle"><i class="fas fa-bars"></i></label>
      <input type="checkbox" id="toggle">
    </div>

    <div class="menu-container">
      <a class="menu-item" href="#">Categories</a>
      <a class="menu-item" href="#">How It Works</a>
      <a class="menu-item" href="#">Log In</a>
      <a class="menu-item" href="#">Register</a>
    </div>

  </nav>

</body>

</html>

Thank you,

score -1 · Answer 1 · answered Mar 09 '20 at 00:03

It can't solve by css in now html structure. Move input element outside of the div element , it problem is solved.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

.nav-container {
  position: fixed;
  top: 0;
  width: 100vw;
  /*border: 1px solid red;*/
}

.toggle-container {
  display: flex;
  justify-content: flex-end;
  /*border: 1px solid blue;*/
  /*margin: 20px;*/
}

.menu-container {
  display: flex;
  justify-content: flex-end;
  margin: 20px 30px 20px 20px;
}

.menu-item {
  padding: 0 10px;
  font-size: 1.1em;
}

#toggle {
  display: none;
}

.toggle {
  display: none;
  font-size: 1.8em;
  padding: 15px 30px 10px 0;
}

/*.menu-container {
    display: flex;
    flex-direction: column;
    border: 1px solid green;
    align-items: center;
}
*/

@media only screen and (max-width: 500px) {
  .toggle {
    display: block;
  }

  .menu-container {
    flex-direction: column;
    margin: 0;
    border-top: 1px solid gray;
    display: none;
  }

  .menu-item {
    padding: 8px;
    width: 100vw;
    text-align: center;
    border-bottom: 1px solid gray;
  }



  #toggle:checked+.menu-container {
    display: block;
  }

}

<!DOCTYPE html>
<html>

  <head>
    <title>Bundles</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Comptible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="mynavtext.css">
    <link rel="stylesheet" href="..\fontawesome-free-5.12.1-web\css\all.css">
  </head>

  <body>

    <nav class="nav-container">

      <div class="toggle-container">
        <label class="toggle" for="toggle"><i class="fas fa-bars"></i>icon</label>
      </div>
      <input type="checkbox" id="toggle">
      <div class="menu-container">
        <a class="menu-item" href="#">Categories</a>
        <a class="menu-item" href="#">How It Works</a>
        <a class="menu-item" href="#">Log In</a>
        <a class="menu-item" href="#">Register</a>
      </div>

    </nav>

  </body>

</html>

Pseudo and Adjacent Sibling Selectors

1 Answers1