In the menu made on bootstrap and I have a lot of menu items and at a certain screen resolution, they slide into the 2nd line - fiddle . How to make so that the folding into a sandwich happens before the menu items are on the other line? By default, folding occurs only at 768px
.navbar-brand { height: auto; margin-left: 0 !important; } @media screen and (min-width: 768px) { .navbar > .container > * { display: table-cell !important; float: none; vertical-align: middle; } } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet" /> <div class="navbar navbar-inverse"> <div class="container"> <!-- Header --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> <img src="http://placehold.it/66x61">Bootstrap 3 Skeleton </a> </div> <!-- Navbar Links --> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a> </li> <li><a href="#about">About</a> </li> <li><a href="#about">First</a> </li> <li><a href="#about">Second</a> </li> <li><a href="#about">Third</a> </li> <li><a href="#about">Forth</a> </li> <li><a href="#contact">Contact</a> </li> </ul> </div> </div> </div> 
