I'm working on a framework but I'm having a hard time adding the toggle menu because I'd like it to appear below 850px, I tried to use media quare, but it did not work, it keeps showing up with the 850px dimension. I would like below 850 px to appear in the mobile menu.
<body id="home" class="homepage">
<header id="header">
<nav id="main-menu" class="navbar navbar-default navbar-fixed-top" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="dropdown" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt="logo"></a>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="scroll active"><a href="#home">Home</a></li>
<li class="scroll"><a href="#missao">Missão</a></li>
<li class="scroll"><a href="#negocio">Modelo de Negócio</a></li>
<li class="scroll"><a href="#parceiros">Parceiros</a>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Soluções<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#vendas">Para Vendas</a></li>
<li><a href="#locacao">Para Locação</a></li>
<li><a href="#incorporadoras">Para Incorporadoras</a></li>
<li><a href="#meet-team">Demais</a></li>
</ul>
</li>
<li class="scroll"><a href="#contato">Contato</a></li>
<li class="scroll"><a href="http://isolve.maxfinancas.com.br/">iSolve</a></li>
</ul>
</div>
</div><!--/.container-->
</nav><!--/nav-->
</header><!--/header-->
.navbar.navbar-default {
border: 0;
border-radius: 0;
margin-bottom: 0;
}
.navbar.navbar-default .navbar-toggle {
margin-top: 32px;
}
.navbar.navbar-default .navbar-brand {
height: auto;
padding: 22px 15px 21px;
}
@media only screen and (min-width: 900px) {
#main-menu.navbar-default {
background: rgba(255, 255, 255, 0.9);
-webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
}
#main-menu.navbar-default .navbar-nav > li > a {
padding-top: 40px;
padding-bottom: 40px;
}
#main-menu.navbar-default .navbar-nav > li.active > a,
#main-menu.navbar-default .navbar-nav > li.open > a,
#main-menu.navbar-default .navbar-nav > li:hover > a {
background: transparent;
padding-top: 37px;
border-top: 3px solid #144576;
}
#main-menu.navbar-default .dropdown-menu {
padding: 0 20px;
min-width: 220px;
background-color: rgba(26, 28, 40, 0.9);
border: 0;
border-radius: 0;
box-shadow: none;
-webkit-box-shadow: none;
background-clip: inherit;
}
#main-menu.navbar-default .dropdown-menu > li {
border-left: 3px solid transparent;
margin-left: -20px;
padding-left: 17px;
-webit-transition: border-color 400ms;
transition: border-color 400ms;
}
#main-menu.navbar-default .dropdown-menu > li > a {
border-top: 1px solid #15467b;
padding: 15px 0;
color: #eeeeee;
}
#main-menu.navbar-default .dropdown-menu > li:first-child > a {
border-top: 0;
}
#main-menu.navbar-default .dropdown-menu > li.active,
#main-menu.navbar-default .dropdown-menu > li.open,
#main-menu.navbar-default .dropdown-menu > li:hover {
border-left-color: #15467b;
}
#main-menu.navbar-default .dropdown-menu > li.active > a,
#main-menu.navbar-default .dropdown-menu > li.open > a,
#main-menu.navbar-default .dropdown-menu > li:hover > a {
color: #15467b;
background-color: transparent;
}
}