I am trying to create a navbar in bootstrap 3.x. But I have an issue (JsFiddle) when trying to divide the menus to the left and right as in the following example.
Home - About - Services - Contact Login - Register
But the result I get with my code is something like this:
Home - About - Login
Services - Contact Register
This is my code currently.
.site-top-nav{
padding:0.5em;
color: #fff;
font-size: 12px;
width: 100%;
text-transform: uppercase;
}
.site-top-nav li{
margin-left: 2%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse" role="nagivation">
<div class="container-fluid">
<div class="navbar-inner site-top-nav">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav" style="float:right;">
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
</nav>
I have tried other methods, but I can't get the effect I needed.
style="float: right"
, you should useclass="nav navbar-nav navbar-right"
see this example: jsfiddle.net/DTcHh