Stop element wrapping in bootstrap nav

Question

I have a bootstrap-navbar which is wrapping onto two lines below a certain width, is there any way to stop it doing this without hacking around in the bootstrap LESS file?

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header"> <span class="navbar-brand">Brand</span></div>
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a id="btn-dashboard" class="navbar-link">Items&nbsp;&nbsp;
                    <span class="badge">1</span></a>
            </li>
        </ul>
    </div>
</nav>

Example at: http://jsfiddle.net/u10Lvgk8/2/

If you reduce the page width on the project above, you'll see the menu wraps onto two lines, even though the elements are very small! Am I doing something wrong, or is this just a bootstrap limitation?

Possible duplicate of [Disable Bootstrap 3 navbar going 2 rows in medium viewport size](http://stackoverflow.com/questions/20012665/disable-bootstrap-3-navbar-going-2-rows-in-medium-viewport-size) — Amel, Nov 17 '15 at 13:30

score 2 · Answer 1 · answered Nov 17 '15 at 13:31

2

You can fix this using CSS. Try adding this to your CSS file:

.navbar-header {
    float:left;
}
.navbar-nav {
    float:right;
}

http://jsfiddle.net/u10Lvgk8/4/

answered Nov 17 '15 at 13:31

cakan

2,099
5
32
42

This is good advice, I gave you a vote but gave the answer point to @Schultzie since the !important tags were required in my case. Thanks though! – pseudological Nov 18 '15 at 14:25

score 1 · Accepted Answer · answered Nov 17 '15 at 13:32

You'll notice when the screen is larger than 768px bootstrap specific styles take into effect.

@media (min-width: 768px)
.navbar-right {
    float: right!important;
    margin-right: -15px;
}
@media (min-width: 768px)
.navbar-header {
    float: left;
}

You can change those in your own CSS (without overloading the vendor stylesheets) because of the way CSS works. As long as your stylesheet is linked AFTER bootstrap's your CSS rules will have a higher precedence than Bootstrap's. Meaning, your styles can override bootstrap's.

So you would just change these to:

Something like:

@media (min-width: 460px)
.navbar-right {
    float: right!important;
    margin-right: -15px;
}
@media (min-width: 460px)
.navbar-header {
    float: left;
}

https://jsfiddle.net/u10Lvgk8/2/

@pseudological happy to help! – acupofjose Nov 18 '15 at 14:25 — acupofjose, Nov 18 '15 at 14:25

Adarsh Mohan · Answer 3 · 2015-11-18T14:52:53.670

You didnt close the span having class navbar-brand properly.. this(>) is missing

and for lower screenwidth bootstrap automatically drops the right navbar to bottom, you can hide it by Collapsing The Navigation Bar as,

@media screen and (max-width:768px){
 .navbar-right{
  float: right !important;
     margin-right: -15px !important;
 }
 .navbar{border-radius:4;}
 .container-fluid>.navbar-header{    margin-right: 0;
    margin-left: 0;}
 .navbar-header {
    float: left;
 }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <span class="navbar-brand">Brand</span>
    </div>
    <div>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a id="btn-dashboard" class="navbar-link">Items&nbsp;&nbsp;<span class="badge">1</span></a>
        </li>
      </ul>
    </div>
  </div>
</nav>

I didn't, good spot :). I'm not looking for a collapse to a hamburger style menu, I don't see why I should have to when the button is clearly small enough to fit on the same line without collapsing! — pseudological, Nov 18 '15 at 14:22
@pseudological.. I have changed the code.. maybe this will help you..:D — Adarsh Mohan, Nov 18 '15 at 14:53

Stop element wrapping in bootstrap nav

3 Answers3