Bootstrap 3 nav collapse menu - anchor always on the right - css

Question

I have this Bootstrap head menu, and i want the Login anchor, allways on the right, after the UL nav, and collapsed button.
I've tried a .pull-right on that, but didn't work.
<header id="main-header">
<nav class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<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="#">
<img alt="Logo" src=""></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul id="nav" class="nav navbar-nav nav-pills navbar-right">
<li>home</li>
<li class="dropdown">link2</li>
<li class="">link3</li>
<li class="">link4</li>
<li class="">link4
<ul class="dropdown-menu">
<li>sublink</li>
<li>sublink2</li>
</ul>
</li>
</ul>
<a href="#" class="btn btn-primary">
Login</a></div>
</nav>
</header>

Answer 1

Because there's problem with jsfiddle currently, I'll paste modified code here:
<header id="main-header">
<nav class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<div class="pull-right">
<a id="rightAnchor" href="#" class="btn btn-primary">
Login</a>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <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="#">
<img alt="Logo" src=""/></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul id="nav" class="nav navbar-nav nav-pills navbar-right">
<li>home
</li>
<li class="dropdown">link2
</li>
<li class="">link3
</li>
<li class="">link4
</li>
<li class="">link4
<ul class="dropdown-menu">
<li>sublink</li>
<li>sublink2</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
Firsltly, you're missing one closing div, just before the nav closing tag. Next, I've added div with pull-right class just before button in navbar-header. Finally, add some margins so that login anchor would look same as menu:
#rightAnchor {
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
}
UPDATE: I did not check how it behaves when we have different resolution. How about this: we create 2 login anchors and controll theirs appearance with media queries? With this HTML would look like this:
<header id="main-header">
<nav class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<div id="rightAnchorMobile" class="pull-right">
<a href="#" class="btn btn-primary">
Login</a>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <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="#">
<img alt="Logo" src=""/></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<div id="rightAnchor" class="pull-right">
<a href="#" class="btn btn-primary">
Login</a>
</div>
<ul id="nav" class="nav navbar-nav nav-pills navbar-right">
<li>home
</li>
<li class="dropdown">link2
</li>
<li class="">link3
</li>
<li class="">link4
</li>
<li class="">link4
<ul class="dropdown-menu">
<li>sublink</li>
<li>sublink2</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
And CSS:
#media screen and (min-width:768px) {
#rightAnchorMobile {
display: none;
}
}
#media screen and (max-width: 768px) {
#rightAnchor {
display: none;
}
}
#rightAnchorMobile > a {
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
}
#rightAnchor > a {
margin-top: 8px;
margin-left: 15px;
margin-bottom: 8px;
}