Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

deehhalves

Menu Collapse não funciona.

Recommended Posts

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;

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.