How can i modify this bootstrap code? - html

Question

I found a code from
http://usebootstrap.com/theme/facebook
But in this code, I want to make 'Home icon' never be collapsed at any browser size.
CODE:
<div class="navbar navbar-blue navbar-static-top">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
b
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
###▽▽▽ I want this icon remain on the navbar, not in collapsed dropdown menu
<i class="glyphicon glyphicon-home"></i>
###△△△ I want this icon remain on the navbar, not in collapsed dropdown menu
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="glyphicon glyphicon-user"></i>
<ul class="dropdown-menu">
<li>More</li>
<li>More</li>
<li>More</li>
</ul>
</li>
</ul>
</nav>
</div>
Bootply: https://www.bootply.com/lEfd188zDg
I tried to move <i class="glyphicon glyphicon-home"></i> to after b, but it looks very ugly.
I want that 'Home icon' is still seen in smaller browser size, being looks nicely not ugly. How can i modify well?
EDIT
Pic:
This simplified code is a little different from above code that i posted firstly.
Simplified code:
<div class="wrapper">
<div class="box">
<div class="row row-offcanvas row-offcanvas-left">
<div class="column col-sm-12 col-xs-12" id="main">
<!-- top nav -->
<div class="navbar navbar-blue navbar-static-top">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
<i class="glyphicon glyphicon-home"></i>
</li>
<li>
<i class="glyphicon glyphicon-home"></i>
</li>
<li>
<i class="glyphicon glyphicon-home"></i>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="glyphicon glyphicon-user"></i>
<ul class="dropdown-menu">
<li>More</li>
<li>More</li>
</ul>
</li>
</ul>
</nav>
<!-- /top nav -->
</div>
</div>
</div>
</div>
</div>
original result is like:
and in narrow browser,
But purpose result is like:
Would give me the way how to make this?

Answer 1

I just updated your HTML code and added CSS. Just replace it with yours. Please Only tap nav.
<style>
.heading-icons li{
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
}
</style>
<div class="navbar navbar-blue navbar-static-top">
<div class="col-xs-6 col-sm-6">
<ul class="list-inline heading-icons">
<li>
<i class="glyphicon glyphicon-home"></i>
</li>
<li>
<i class="glyphicon glyphicon-home"></i>
</li>
<li>
<i class="glyphicon glyphicon-home"></i>
</li>
</ul>
</div>
<div class="navbar-header col-xs-6 col-sm-6">
<button class="navbar-toggle" type="button" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i
class="glyphicon glyphicon-user"></i></a>
<ul class="dropdown-menu">
<li>More</li>
<li>More</li>
</ul>
</li>
</ul>
</nav>
<!-- /top nav -->
</div>