Preciso de auxílio com media queries

[deehhalves 0]

Tenho um menu mobile que quero colocar em meu site. Porém, não consigo fazer com que ele aparece somente quando a tela atingir do tamanho de 992 px (media queries).

 

<nav id="navbar_mobile" class="navbar navbar-default">

<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span style="float: left; margin-top: -17px; margin-left: 34px; font-size: 15px;">Menu</span>

</button>

</div>

<div id="bs-example-navbar-collapse-1">

<div id="item_menu_mobile">

<a href="index.php" id="DIREITO_m"><li>Inicial</li></a>

<a href="institucional.php" id="DIREITO_m"><li>Institucional</li></a>

<a href="parceiros.php" id="DIREITO_m"><li>Parceiros</li></a>

<a href="busca.php" id="DIREITO_m"><li>Busca</li></a>

<a href="anuncie.php" id="DIREITO_m"><li>Anuncie</li></a>

<a href="contato.php" id="DIREITO_m"><li>Contato</li></a>

</div>

</div>

</nav>

[Electronic 124]

vc so postou o html, e o css?

[deehhalves 0]

#item_menu_mobile {
background: #efca1b; 
text-decoration: none;
list-style:none;
font-size: 30px;


}
#item_menu_mobile li {
padding: 5px 10px; 
}


#item_menu_mobile li:hover{
background: #735C12;
transition: background 0.2s ease-in;
cursor: pointer;
}
#DIREITO_m {
color: #fff;
font-size: 23px;
transition: color 0.2s ease-in-out;
text-decoration: none;
}

Esse é o css dos itens que aparecem no menu;

@media (max-width: 768px) {
????? (o que fazer para ele aparecer quando tiver esse tamanho de tela (768px)); 
}
#navbar_mobile {
display: none; 
}

Esse css seria do menu todo;

[pmmartinelli 13]

Talvez o que esteja faltando é você colocar a declaração CSS dentro da condicional.

@media (max-width: 768px) {
   #navbar_mobile {
      display: block; 
   }
}
#navbar_mobile {
display: none; 
}

[deehhalves 0]

Obrigado cara, consegui. Em partes. Quando a resolução chega em 768px, o menu já vem aberto sem ao menos o usuário clicar para abri-lo. O que pode ser?

[pmmartinelli 13]

Como o display foi aplicado ao NAV, que é container tanto do botão quanto do menu, ambos estarão visíveis.

Neste caso você deverá fazer o seguinte:

@media (max-width: 768px) {
   #navbar_mobile { display: block; }
   #item_menu_mobile { display: none; }
}

Isto exibirá todo o conteúdo do #navbar_mobile, exceto o #item_menu_mobile.

 

Feito isso, basta manipular o display do #item_menu_mobile com Javascript.