Bootstrap 3 - item float right in navigation
34,698
Solution 1
Add the pull-right
class to the ul tag
Full Example:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">ApplicationName</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="main-navigation">
<li><a href="#">Item1</a></li>
</ul>
<ul class="nav navbar-nav pull-right" id="main-navigation">
<li><a href="#" class="pull-right">Item2</a></li>
</ul>
</div>
</div>
</nav>
Result:
Solution 2
You have to give the element this:
CSS
li.right {
position: absolute;
right: 0;
}
HTML
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">ApplicationName</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="main-navigation">
<li><a href="#">Item1</a></li>
<li class="right"><a href="#">Item2</a></li>
</ul>
</div>
</div>
Solution 3
as of the new bootstrap, we dont use pull-right
As of v3.1.0, we've deprecated .pull-right on dropdown menus. To right-align a menu, use .dropdown-menu-right
. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .dropdown-menu-left.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
if you use haml
%ul.nav.navbar-nav.navbar-right/
%li
%a{:href => "http://yoursitelogo.co/"}
%img{:alt => "Some site", :height => "50", :src => "/assets/image.png"}
Author by
NullCod3
Updated on July 10, 2022Comments
-
NullCod3 almost 2 years
This is my current navigation:
<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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="#">ApplicationName</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav" id="main-navigation"> <li><a href="#">Item1</a></li> <li><a href="#">Item2</a></li> </ul> </div> </div> </nav>
With this navigation I'm having this:
What I actually want is this:
I've tried floating of the anchor tag but it's floating just inside the li tag. In ExtJS I'm having the '->' item which provides me this behavior. How can I do this?
I'm using Bootstrap 3.1.1.
Thank you. :)