0

Estou trabalhando num framework porém estou tendo dificuldade para adicionar o menu toggle, porque gostaria que ele aparecesse abaixo de 850px, já tentei usar media quare, mas não deu certo, ela continua aparecendo ele inteiro com a dimensão 850px. Gostaria abaixo de 850 px aparecesse o menu de mobile.

<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;
  }


}
2
  • Da uma indentada nesse css ai, que ele tá impossivel de ler! Commented 14/04/2016 às 14:25
  • Danilo seja bem vindo ao StackOverflow. É interessante dá uma lida no tour para entender melhor o funcionamento do site pt.stackoverflow.com/tour. Tem como fazer um Fiddle ou focar mais no seu problema em si? seu código está muito extenso.
    – Marconi
    Commented 14/04/2016 às 14:27

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .