Tenho um menu collapse no meu site que só deve aparecer quando a tela atingir tantos pixels. Até aí tudo bem, ele aparece quando atinge os pixels. Mas o botão simplesmente não funciona, é como se fosse um botão inativo, sem função alguma. O menu com os itens aparece em forma de lista, tudo bonitinho, mas na hora de clicar no botão para essa lista subir ou descer, não acontece nada.
HTML:
<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;">Menu</span> </button> </div> <div id="bs-example-navbar-collapse-1" style="box-shadow: 3px 3px 15px #888888";> <div id="item_menu_mobile"> <a href="#" id="direito_m"><li>Sobre</li></a> <a href="#" id="direito_m"><li>Suítes</li></a> <a href="#" id="direito_m"><li>Gastronomia</li></a> <a href="#" id="direito_m"><li>Serviços</li></a> <a href="#" id="direito_m"><li>Reservas</li></a> <a href="#" id="direito_m"><li>Social</li></a> <a href="#" id="direito_m"><li>Prime Club</li></a> <a href="#" id="direito_m"><li>Contato</li></a> </div> </div> </nav>
CSS:
#item_menu_mobile { background: #9c0101; text-decoration: none; list-style:none; font-size: 30px; } #item_menu_mobile li { padding: 5px 10px; } #item_menu_mobile li:hover{ background: #550d0d; transition: background 0.2s ease-in; cursor: pointer; } #direito_m { color: #fff; font-size: 19px; transition: color 0.2s ease-in-out; text-decoration: none; } #navbar-header { display: none; } #navbar_mobile { display: none; } @media (max-width: 820px) { #navbar_mobile { display: block; } }
*Lembrando que estou usando bootstrap;