Keep navigation items on all screen sizes - html

Question

I'm trying to build a bootstrap navbar which has the navigation links on the left side and some user icons on the right.
On mobile the navigation links should be collapsed but the icons should be left (or even centered?) to the burger icon.
It looks fine on the desktop (width > 768px). But on a small width the icons are displayed below each other instead of next to each other.
Here is my code so far:
<nav class="navbar navbar-inverse navbar-fixed-top bo-header">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">MY BRAND</a>
</div>
<!-- non-collapsing items -->
<div class="navbar-header navbar-right">
<ul class="nav navbar-nav">
<li><i class="fa fa-envelope"></i></li>
<li><i class="fa fa-users"></i></li>
<li><i class="fa fa-wrench"></i></li>
</ul>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Nav Entry 1</li>
<li>Nav Entry 2</li>
<li>Nav Entry 3</li>
<li>Nav Entry 4</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Working jsfiddle:
http://jsfiddle.net/n9KtL/188/
Thanks for your help!

Answer 1

Here's an example of how you can keep your icons inside the navbars container (so all elements inside the navbar remain consistent) and then position the icons to remain exposed on viewports under 768px.
#media (max-width: 767px) {
.navbar .navbar-right.navbar-top {
position: absolute;
margin-top: 4px;
right: 80px;
}
.navbar .navbar-right.navbar-top > li {
display: inline-block;
}
.navbar .navbar-right.navbar-top > li > a {
padding-right: 10px;
padding-left: 10px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top bo-header">
<div class="container">
<ul class="nav navbar-nav navbar-right navbar-top">
<li><i class="fa fa-envelope"></i>
</li>
<li><i class="fa fa-users"></i>
</li>
<li><i class="fa fa-wrench"></i>
</li>
</ul>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">MY BRAND</a>
</div>
<!-- non-collapsing items -->
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-left">
<li>Nav Entry 1
</li>
<li>Nav Entry 2
</li>
<li>Nav Entry 3
</li>
<li>Nav Entry 4
</li>
</ul>
</div>
</div>
</nav>