Menu Collapse não funciona.

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;