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><scriptsrc="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>Good morning everyone. I needed a little help. I was needing to modify my navbar breakpoint and I was able to find in the forum a question with this doubt along with your answer. I copied, pasted and went to do the tests but while the navbar is reduced and I click, the menu opens and closes at the same time.
That doubt was also questioned there, but no one knew how to respond. I made some changes and tests but I was not successful and so I came here to see if anyone could help me and thank you.
Response link I found: Change the breakpoint of navbar
CSS here below:
@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;
}
}