1

nav #btn-principais{
	background-color: #27C8D0;
	border-radius: 1px !important;
	float: right;
}
#logo{
	width: 240px;
	height: auto;
	float: left;
}
nav .icon-bar{
	background-color: #000;
}
.navbar-collapse {
    padding-right: 15px;
    padding-left: 15px;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid transparent;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.collapse {
    display: none;
}
ul .dropdown-menu{
	background-color: #FFF;
}
ul .dropdown-menu li{
	padding: 10px 0px;
	font-weight: 700;
}
ul .dropdown-menu a:hover{
	background-color: transparent;
	color: #27C8D0;
}
@media (min-width: 768px){
.container>.navbar-header, .container-fluid>.navbar-header, .container>.navbar-collapse, .container-fluid>.navbar-collapse {
    margin-right: 0;
    margin-left: 0;}
}
.container>.navbar-header, .container-fluid>.navbar-header, .container>.navbar-collapse, .container-fluid>.navbar-collapse {
    margin-right: -15px;
    margin-left: -15px;
}

@media (min-width: 768px){
.navbar-collapse.collapse {
    display: block!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;}
}
@media (min-width: 768px){
.navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
    box-shadow: none;}
}
/* my breakpoint */
@media (max-width: 1224px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}
<!DOCTYPE html>
<html lang="pt-br">
	<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Teste navbar</title>
	
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
  	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/dropdown.js"></script>
    
<body>

<header>
<div class="container-fluid" id="topo">

		<div class="col-xs-12 col-sm-12 col-md-12" id="nav-menu">
			<nav class="navbar">
			  <div class="container-fluid">
			    <div class="navbar-header">
			      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#newNavbar">
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>                        
			      </button>				
			      <a class="navbar-brand" id="logo" href="#"><img src="logos.png" class="img-responsive"></a>
			   </div>
			    <div class="collapse navbar-collapse" id="newNavbar">
			      <!--<ul class="nav navbar-nav navbar-right" id="btn-principais">-->
			      	<ul class="nav navbar-nav" id="btn-principais">			        
			        <li><a href="#">Link 1</a></li>
			        <li><a href="#">Link 2</a></li>
			        <li><a href="#">Link 3</a></li>
			        <li><a href="#">Link 4</a></li>
			        <li><a href="#">Link 5</a></li>
			        <li><a href="#">Link 6</a></li>
			        <li><a href="#"><span class="glyphicon glyphicon-check"></span> Link 7</a></li>
			      </ul>
			    </div>
			  </div>
			</nav>
		<!--</div>-->
		
	</div>
	<!-- fim #topo -->


</div>


</header>
</body>
</html>

Bom dia pessoal. Precisava de uma ajudinha. Eu estava precisando modificar meu breakpoint do navbar e consegui achar aqui no forum uma pergunta com essa dúvida juntamente com sua resposta. Copiei, colei e fui fazer os testes mas enquanto a navbar está reduzida e clico, o menu abre e fecha no mesmo instante.

Essa dúvida também foi questionada lá, porém ninguém soube responder. Fiz algumas mudanças e testes mas não tive sucesso e por isso vim aqui ver se alguém poderia me ajudar e desde já agradeço.

Link da resposta que achei: Mudar o ponto de quebra (breakpoint) do navbar

CSS aqui embaixo:

@media (max-width: 990px) {
.navbar-header {
    float: none;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-nav {
    float: none!important;
    margin: 7.5px -15px;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}
}
4
  • Consegue deixar o exemplo rodando aqui para vermos o erro dele abrindo e fechando? 1/03/2018 às 13:00
  • @LuizFelipe vou publicar e coloco a url aqui ta bem. Obrigada!
    – Fernanda
    1/03/2018 às 13:04
  • Coloca o seu código completo HTML com a <head> css etc
    – hugocsl
    1/03/2018 às 13:09
  • Acabei de colocar.
    – Fernanda
    1/03/2018 às 13:30

2 Respostas 2

0

Vc está usando uma classe a mais no lugar errado!

Remova a classe navbar-collapse nessa <div>

<div class="collapse navbar-collapse" id="newNavbar">

Deve ser apenas

<div class="collapse" id="newNavbar">

EDIT: para continuar mostrando o Menu normal nas telas grandes tem que colocar .collapse {display: block;} antes dos @media e dentro do @media (max-width: 1224px) vc coloca .collapse {display: none;} Execute o Snippet abaixo que já corrigi isso.

Veja abaixo o exemplo funcionando sem o BUG (não mexi em nada de CSS ou HTML, apenas removi a classe navbar-collapse na <div>)

<!DOCTYPE html>
<html lang="pt-br">
	<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Teste navbar</title>
	
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
  	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/dropdown.js"></script>

    <style>
    nav #btn-principais{
	background-color: #27C8D0;
	border-radius: 1px !important;
	float: right;
}
#logo{
	width: 240px;
	height: auto;
	float: left;
}
nav .icon-bar{
	background-color: #000;
}
.navbar-collapse {
    padding-right: 15px;
    padding-left: 15px;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid transparent;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.collapse {
    display: block;
}
ul .dropdown-menu{
	background-color: #FFF;
}
ul .dropdown-menu li{
	padding: 10px 0px;
	font-weight: 700;
}
ul .dropdown-menu a:hover{
	background-color: transparent;
	color: #27C8D0;
}

@media (min-width: 768px){
.container>.navbar-header, .container-fluid>.navbar-header, .container>.navbar-collapse, .container-fluid>.navbar-collapse {
    margin-right: 0;
    margin-left: 0;}
}
.container>.navbar-header, .container-fluid>.navbar-header, .container>.navbar-collapse, .container-fluid>.navbar-collapse {
    margin-right: -15px;
    margin-left: -15px;
}

@media (min-width: 768px){
.navbar-collapse.collapse {
    display: block!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;}
}
@media (min-width: 768px){
.navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
    box-shadow: none;}
}
/* my breakpoint */
@media (max-width: 1224px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse {
    display: none;
}
    
}
    </style>
    
<body>

<header>
<div class="container-fluid" id="topo">

		<div class="col-xs-12 col-sm-12 col-md-12" id="nav-menu">
			<nav class="navbar">
			  <div class="container-fluid">
			    <div class="navbar-header">
			      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#newNavbar">
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>                        
			      </button>				
			      <a class="navbar-brand" id="logo" href="#"><img src="http://placeskull.com/100/50" class="img-responsive"></a>
			   </div>
			    <div class="collapse" id="newNavbar">
			      <!--<ul class="nav navbar-nav navbar-right" id="btn-principais">-->
			      	<ul class="nav navbar-nav" id="btn-principais">			        
			        <li><a href="#">Link 1</a></li>
			        <li><a href="#">Link 2</a></li>
			        <li><a href="#">Link 3</a></li>
			        <li><a href="#">Link 4</a></li>
			        <li><a href="#">Link 5</a></li>
			        <li><a href="#">Link 6</a></li>
			        <li><a href="#"><span class="glyphicon glyphicon-check"></span> Link 7</a></li>
			      </ul>
			    </div>
			  </div>
			</nav>
		<!--</div>-->
		
	</div>
	<!-- fim #topo -->


</div>


</header>
</body>
</html>

8
  • Verdade ... testei aqui e funcionou perfeitamente, sendo que quando a resolução é acima de 990px o menu desaparece :-( Tenta ver por aí como ficou. Por aqui vou tentar mexer mais um pouco baseada no que me enviou. Fico grata e se achar alguma coisa me fala por favor rs
    – Fernanda
    1/03/2018 às 14:13
  • Fernanda já está resolvido, é que quando vc criou o seu BreackPoint vc colocou MAX-width @media (max-width: 1224px) e na verdade vc deveria colocar @media (min-width: 1224px) para funcionar em telas grandes. Eu já editei a minha resposta arrumando isso, olha ai
    – hugocsl
    1/03/2018 às 14:19
  • Se a minha resposta te ajudou de alguma forma considere marcar como Resolvido usando o ao lado das setas a esquerda
    – hugocsl
    1/03/2018 às 14:20
  • Oi Hugo, obrigada mas nesse caso é max-width mesmo porque até 1224px preciso que o hamburguerzinho apareça e acima já vem o menu normal mesmo.
    – Fernanda
    1/03/2018 às 14:46
  • Fernanda fiz uma edição na minha resposta resolvendo o problema de vez, basta Executar e depois clicar me "Pagina toda" para ver funcionando, ou coloca direto no seu projeto e pode testar. No EDIT da minha resposta coloquei a explicação :)
    – hugocsl
    1/03/2018 às 15:25
0

Apenas removi a propriedade display:none !important do .navbar-collapse.collapse e resolveu. Você removendo a classe .navbar-collapse teria problemas no layout. Olha como ficou:

nav #btn-principais{
	background-color: #27C8D0;
	border-radius: 1px !important;
	float: right;
}
#logo{
	width: 240px;
	height: auto;
	float: left;
}
nav .icon-bar{
	background-color: #000;
}
.navbar-collapse {
    padding-right: 15px;
    padding-left: 15px;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid transparent;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.collapse {
    display: none;
}
ul .dropdown-menu{
	background-color: #FFF;
}
ul .dropdown-menu li{
	padding: 10px 0px;
	font-weight: 700;
}
ul .dropdown-menu a:hover{
	background-color: transparent;
	color: #27C8D0;
}
@media (min-width: 768px){
.container>.navbar-header, .container-fluid>.navbar-header, .container>.navbar-collapse, .container-fluid>.navbar-collapse {
    margin-right: 0;
    margin-left: 0;}
}
.container>.navbar-header, .container-fluid>.navbar-header, .container>.navbar-collapse, .container-fluid>.navbar-collapse {
    margin-right: -15px;
    margin-left: -15px;
}

@media (min-width: 768px){
.navbar-collapse.collapse {
    display: block!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;}
}
@media (min-width: 768px){
.navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
    box-shadow: none;}
}
/* my breakpoint */
@media (max-width: 1224px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }

    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}
<!DOCTYPE html>
<html lang="pt-br">
	<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Teste navbar</title>
	
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
  	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/dropdown.js"></script>
    
<body>

<header>
<div class="container-fluid" id="topo">

		<div class="col-xs-12 col-sm-12 col-md-12" id="nav-menu">
			<nav class="navbar">
			  <div class="container-fluid">
			    <div class="navbar-header">
			      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#newNavbar">
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>                        
			      </button>				
			      <a class="navbar-brand" id="logo" href="#"><img src="logos.png" class="img-responsive"></a>
			   </div>
			    <div class="collapse navbar-collapse" id="newNavbar">
			      <!--<ul class="nav navbar-nav navbar-right" id="btn-principais">-->
			      	<ul class="nav navbar-nav" id="btn-principais">			        
			        <li><a href="#">Link 1</a></li>
			        <li><a href="#">Link 2</a></li>
			        <li><a href="#">Link 3</a></li>
			        <li><a href="#">Link 4</a></li>
			        <li><a href="#">Link 5</a></li>
			        <li><a href="#">Link 6</a></li>
			        <li><a href="#"><span class="glyphicon glyphicon-check"></span> Link 7</a></li>
			      </ul>
			    </div>
			  </div>
			</nav>
		<!--</div>-->
		
	</div>
	<!-- fim #topo -->


</div>


</header>
</body>
</html>

1
  • Oi Luiz eu dei uma olhada sim, sendo que eu queria que os links do menu apenas surgissem quando clicassem no "hamburguerzinho". Nesse caso o menu já aparece disponível de uma vez e nem clicando no hamburguer ele não some, continua ali.
    – Fernanda
    1/03/2018 às 14:44

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .