CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3
pseudological
pseudological

Reputation: 65

Stop element wrapping in bootstrap nav

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?

Upvotes: 1

Views: 4356

Answers (3)

Adarsh Mohan
Adarsh Mohan

Reputation: 1384

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>

Upvotes: 1

acupofjose
acupofjose

Reputation: 2159

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/

Upvotes: 1

cakan
cakan

Reputation: 2117

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/

Upvotes: 2

Related Questions