0

Fala pessoal, andei procurando sobre isso, mas não encontrei nenhuma resposta diferente do que eu fiz. Estou fazendo um menu responsivo sem javascript (não quero usar js pq sei que não há necessidade). Meu app estou fazendo no react (com create-react-app). A questão é que quando clico no checkbox, o menu não volta a aparecer. Meu código abaixo:

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 ;
  }
}

Alguém saberia me dizer:

1 Resposta 1

2

A sua @media screen deve estar dessa forma:

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

Só adicionar o * depois do ~.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .