Matthias Matthias - 3 months ago 32
CSS Question

Force Navbar elements to stay in one line

I wan't the elements of my Bootstrap Navbar to stay in one line at every width.

I know this question has already been asked several times and I've tried various solutions, but no one worked for my case.

Here's my code:



#head-navbar {
width: 100%;
white-space: nowrap;
display: inline-block;
overflow: hidden;
}
.nav>li {
display: inline-block;
white-space: nowrap;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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.7/js/bootstrap.min.js"></script>


<nav class="navbar navbar-inverse navbar-fixed-top navbar-collapse" id="head-navbar">
<ul class="nav navbar-nav">
<li><a class="#" href="#">Home</a>
</li>
<li><a href="#">Page 1</a>
</li>
<li><a href="#">Page 2</a>
</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li><a href="#">DE</a>
</li>
<li><a href="#">IT</a>
</li>
</ul>
</nav>





I want my Navbar to look like this on a smaller screen:

enter image description here

and not like this:

enter image description here

Answer

Just add display: inline-block; to your li and they will be displayed inline.

.nav>li {
    display: inline-block;
}

Also if you want to display both ul in the same line you can do the same thing to the ul elements.Here you have a jsfiddle for both ul inline.

Also in firefox you will have a breakpoint in 768px so you should remove the white-space:nowrap

#head-navbar {
  white-space: normal;
}

P.s : i don't know if it is a TYPO but you should use .pull-right instead of .navbar-right to float right an element