Force Navbar elements to stay in one line - html

Question

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>Page 1
</li>
<li>Page 2
</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li>DE
</li>
<li>IT
</li>
</ul>
</nav>
I want my Navbar to look like this on a smaller screen:
and not like this:

Answer 1

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

Answer 2

It's because of media queries, so on smaller screens it changes the style. Just add these:
.navbar-nav {
float: right;
margin: 0;
}
.navbar-nav > li {
float: right;
}

Answer 3

Add the below css, This should work for you.
#head-navbar {
width: 100%;
white-space: nowrap;
display: inline-block;
overflow: hidden;
}
.nav>li {
display: inline-block;
width:initial;
float:left;
white-space: nowrap;
}
.nav {
display: inline-block;
}
#media screen and (max-width:768px)
{
.nav.navbar-nav.pull-right { float:none !important; }
}
<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>Page 1
</li>
<li>Page 2
</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li>DE
</li>
<li>IT
</li>
</ul>
</nav>

Answer 4

.pull-right{
float:right;
}
#head-navbar {
width: 100%;
white-space: nowrap;
display: inline-block;
overflow: hidden;
}
.nav>li {
display: inline-block;
width:initial;
float:left;
white-space: nowrap;
}
.nav {
display: inline-block;
}
#media screen and (max-width:768px)
{
<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>Page 1
</li>
<li>Page 2
</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li>DE
</li>
<li>IT
</li>
</ul>
</nav>