Responsive menu #bt_menu:checked ~ . menu does not work

Question

Talk to you guys, I’ve been looking into this, but I haven’t found any answers other than what I’ve done. I’m making a responsive menu without javascript (I don’t want to use js because I know there’s no need). My app is doing in React (with create-React-app). The point is that when I click on the checkbox, the menu does not appear again. My code below:

JSX:

function NavBar(){
  return(
    <Router>
      <div>
        <div className="div-navbar">
          <div className="div-navbar-img">
            <img className="img-navbar" src={logo} alt="Home" />
          </div>
          <input type="checkbox" id="bt_menu"></input>
          <label htmlFor="bt_menu">&#9776;</label>
          <div className="div-menu">         
            <nav className="menu">
              <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/quemsomos">Quem Somos</a></li>
                <li><a href="/posicionamentos">Psicionamentos</a></li>
                <li><a href="/analises">Análises</a></li>
                <li><a href="/faleconosco">Fale Conosco</a></li>
                <li><a href="/contribua">Contribua</a></li>
              </ul>
            </nav>
          </div>
        </div>
        <Switch>
          <Route exact path="/">
            <App />
          </Route>
          <Route exact path="/quemsomos">
            <QuemSomos />
          </Route>
          <Route exact path="/posicionamentos">
            <Posicionamentos />
          </Route>
          <Route exact path="/analises">
            <Analises />
          </Route>
          <Route exact path="/faleconosco">
            <FaleConosco />
          </Route>
          <Route exact path="/contribua">
            <Contribua />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

CSS:

.menu{
  background-color: #fff;
  height: auto;
}

.menu ul{
  list-style: none;
  position: relative;
}

.menu ul li{
  float: left;
}

.menu a{
  padding: 15px;
  display: block;
  text-decoration: none;
  text-align: center;
  color: #5C2C90;
}

.menu a:hover{
  color: #00A78D;
  font-style: normal;
  text-decoration: none;
}

label[for="bt_menu"]{
  padding: 5px;
  background-color: #fff;
  color: #72747a;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  font-size: 30px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  float: right;
}

#bt_menu{
  display: none;
}

label[for="bt_menu"]{
  display: none;
}

.div-menu{
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center !important;
}

@media(max-width: 800px){

  label[for="bt_menu"]{
    display: block;
  }

  #bt_menu:checked ~ .menu{
    margin-right: 0 !important;
    display: block !important;
  }

  .menu{
    width: 100%;
    margin-right: -200%;
    transition: all .4s;
  }

  .menu ul li{
    width: 100%;
    float: none;
    border-top: 1px solid #e3e1e1;
    background-color: #fff;
  }

  .div-menu{
    margin-top: 60px ;
  }
}

Would anyone know to tell me:

Answer 1

Your @media screen must be that way:

@media screen and ( max-width: 800px ) {
...
  #bt_menu:checked ~ * .menu{
      margin-right: 0 !important;
      display: block !important;
    }
...
}

Just add the * after the ~.