0
was making a menu for a website (school work), but I found a problem:
When it is on small screen it creates that sandwich icon and when it is triggered the menu appears in the form of normal dropdown, but I can’t make the dropdown "up" again, because the "sandwich" button is not appearing again (which I believe should).
Note: I remember that this problem was due to removing something temporarily to try to solve another, but as it has been a while, I can’t remember anymore what it is.
Can you tell me what’s missing from the code so it works properly?
HTML code:
* {
/* Serve para resetar as margens da página */
margin: 0px;
padding: 0px;
}
.log{
margin-top: -30px;
}
.menu{
/* Setamos a largura, Altura e Cor da Nav */
position: fixed ;
top: 0;
width: 100%;
height: 55px;
background-color: #006144;
font-family: Arial, Helvetica, sans-serif;
z-index: 99;
}
.menu ul{
/* Retiramos o estilo nativo das listas e ajeitamos a posição */
list-style: none;
position: relative;
}
.menu ul li{
/* Designamos o espaço máximo das <li> */
width: 150px;
float: left;
}
.menu a{
/* configuramos o <a> */
display: block;
text-decoration: none;
padding: 15px;
text-align: center;
/* Cor das Opções: */
background-color: #006144;
color: white;
max-height: 50px;
}
.menu ul ul{
/* configuração para fazer com que as opções do dropdown fiquem
invisiveis até que se passe o mouse por cima */
position: absolute;
visibility: hidden ;
}
.menu ul li:hover ul{
/*Faz com que depois que se passe o mouse por cima o dropdown fique visível */
visibility: visible;
}
.menu a:hover{
/* estilizamos a cor das opções quando passamos o mouse */
background-color: #f4f4f4;
color: black;
}
.menu ul ul li {
/* criamos uma pequena linha separando cada opção do dropdown */
float: none;
border-top: solid 1px #cccccc;
}
.menu ul ul li a{
background-color: #069;
}
.label_menu{
/* Configuração do icone da versão reduzida */
padding: 5px;
background-color: #006144;
color: white;
font-family: "Arial";
text-align: left;
font-size: 30px;
cursor: pointer;
width: 50px;
height: 50px;
display: none;
}
#bt_menu{
display: none;
}
.logo{
/* configuração da logo do inicio */
width: 40px;
height: 40px;
margin: 5px;
cursor: pointer;
}
.li_logo{
margin-right: -70px;
margin-left: 10px;
}
@media(max-width: 900px){
.menu{
margin-top: 2px;
margin-left: -100%;
font-size:12pt;
}
.li_logo{
margin-left:47%;
}
#bt_menu:checked~ .menu{
/* Faz com que depois que checado a "check-box" as opções voltem a aparecer */
margin-left: 0;
margin-top: 2px;
background-color: #cc002a;
}
.menu ul li{
width: 100%;
float: none;
}
.menu ul ul{
position: static;
overflow: hidden;
max-height: 0;
transition: all .4s;
}
.menu ul li:hover ul{
height: auto;
max-height: 400px;
/* O max height vai variar dependendo do número de itens */
}
.label_menu{
display: block;
width: 100%;
}
}
<input type="checkbox" id="bt_menu">
<label for="bt_menu" class="label_menu">☰</label>
<!-- Inicio da Nav Bar -->
<nav class="menu">
<ul>
<!-- A logo foi colocada em uma <li> com uma classe especifica para não
atrapalhar a formatação -->
<li class="li_logo" onclick="window.location.assign('../Funcs/inicio.php');"> <img src="../imagens/gremio.png" class="logo"> </li>
<li><a href="#"> Bolsa Cópia </a>
<ul>
<li><a href="../bolsaCopia/listar_bolsacopia.php">Listar</a> </li>
<li><a href="../bolsaCopia/cadastrar_bolsacopia.php">Cadastrar</a></li>
</ul>
</li>
<li><a href="#"> Ac.Perdidos </a>
<ul>
<li><a href="../achados/listar_achados.php">Listar</a> </li>
<li><a href="../achados/cadastrar_achados.php">Cadastrar</a></li>
</ul>
</li>
<li><a href="#"> Empréstimos </a>
<ul>
<li><a href="../emprestimo/listar_emprestimo.php">Listar</a> </li>
<li><a href="../emprestimo/cadastrar_emprestimo.php">Cadastrar</a></li>
</ul>
</li>
</ul>
</nav>