Bootstrap Navbar non collapse (prevent) - html

Question

I'm trying to make a navbar using bootstrap to my own needs, but have stumbled upon a problem.
I want the first two links from the left (home and menu glyphicons) to not collapse when window is sized down. The rest would collapse.
Screenshot link
enter link description here
Here is my code
<template name="header">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav">
<li><a class="navbar-nav" href="{{pathFor 'home'}}"><span class="glyphicon glyphicon-home"></span></a></li>
<li><a class="navbar-nav" id="showMenu" href="#"><span class="glyphicon glyphicon-align-left"></span></a></li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navigation">
<ul class="nav navbar-nav">
<li class="{{activeRouteClass 'home' 'newPosts'}}">
New
</li>
<li class="{{activeRouteClass 'bestPosts'}}">
Best
</li>
{{#if currentUser}}
<li class="{{activeRouteClass 'postSubmit'}}">
Submit Post
</li>
<li class="dropdown">
{{> notifications}}
</li>
{{/if}}
</ul>
<ul class="nav navbar-nav navbar-right">
{{> loginButtons}}
</ul>
</div>
</div>
</nav>
</template>

Answer 1

Move them into a separate <ul> object without the nav navbar-nav classes in order to disable this behaviour.