Modify breakpoint of navbar

Asked

Viewed 459 times

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>

Good morning, guys. I could use a little help. I was in need of modifying my navbar breakpoint and managed to find here on the forum a question with that question 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.

This doubt was also questioned there, but no one knew how to answer. I made some changes and tests but I did not succeed and so I came here to see if someone could help me and I thank you already.

Link to the answer I found: Change the breakpoint (breakpoint) of the navbar

CSS down here:

@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;
}
}
css twitter-bootstrap bootstrap-3 menu nav-bar

  • Can you leave the example running here to see its error opening and closing?

  • @Luizfelipe I will publish and put the url here ta well. Thanks!

  • Puts your full HTML code with the <head> css etc

  • I just put.

2 answers

0


You’re using an extra class in the wrong place!

Remove the class navbar-collapse in that <div>

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

It should just be 

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

EDIT: to continue showing the Normal Menu on the big screens have to put .collapse {display: block;} before @media and within @media (max-width: 1224px) you put .collapse {display: none;} Run the Snippet below that already fixed it.

See below for the example working without BUG (did not touch anything CSS or HTML, just removed the class navbar-collapse in <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>

  • Truth ... tested here and worked perfectly, and when the resolution is above 990px the menu disappears :-( Try to see how it looks. Here I will try to move a little more based on what you sent me. I am grateful and if you find something please let me know

  • Fernanda is already solved, is that when you created your Breackpoint you put MAX-width @media (max-width: 1224px) and in fact you should put @media (min-width: 1224px) to work on large screens. I’ve already edited my answer by arranging this, look there

  • If my reply helped you in any way consider marking as Solved using the ✓ next to the left arrows

  • Hi Hugo, thanks but in this case it is max-width even because up to 1224px I need the burger to appear and above already comes the normal menu even.

  • Fernanda made an edition in my answer solving the problem once and for all, just Run and then click on "Whole page" to see working, or put straight into your project and can test. In the EDIT of my answer I put the explanation :)

  • That’s cool, that’s just what I needed Hugo ... fight =)

  • We got a little drunk, but I’m glad it worked out. Good luck with the project :)

  • That nothing ... I who I rolled all kkkk. If it were not for your help I would be lost. Thanks + once and all the best !!

Show 3 more comments

0

I just removed the property display:none !important of .navbar-collapse.collapse and solved. You removing the class .navbar-collapse would have problems in the layout. Look how it looked:

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>

  • Hi Luiz I took a look yes, and I wanted the links on the menu only to appear when they clicked on the "burger". In this case the menu already appears available at once and not even clicking on the burger it does not disappear, continues there.

Browser other questions tagged css twitter-bootstrap bootstrap-3 menu nav-bar

You are not signed in. Login or sign up in order to post.