navbar-right is not responding in bootstrap navigation - html

Question

I am trying to create a small Sinatra app. Currently, trying to set up a conditional navigation bar with the help of bootstrap. I am trying to use navbar-right to show sign up/ login/ logout links on the right side but it's not working correctly. It just shows everything on left. My code for navbar looks like below..
Coding Tips
<!-- Collect the nav links, forms, and other content for toggling -->
<div >
<!-- Main nav bar -->
<ul class="navbar-right nav navbar-nav">
<% if logged_in? %>
<li>
User's tips
</li>
<li>
New Tip
</li>
<li>
Sign out
</li>
<% else %>
<li>
Sign Up
</li>
<li>
Sign In
</li>
<% end %>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
I also added style.css to custom style my navbar, which looks like below..
./*///// NAVBAR ////*/
/* while header */
.navbar-default { background-color: #111111; border-color: transparent; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 300; letter-spacing: 1px; font-size: 5em; /* while fixed */ }
.navbar-default .navbar-header .navbar-brand { font-family: 'Arial', 'sans-serif'; font-size: 1em; color: #31002e; font-weight: 200; text-transform: uppercase; padding: 20px 25px; }
.navbar-default .navbar-header .navbar-brand:hover, .navbar-default .navbar-header .navbar-brand:focus { color: #FF0000; }
.navbar-default .navbar-header .navbar-toggle {font-family: 'Arial', 'sans-serif'; font-size: 1em; color: #31002e; font-weight: 200; text-transform: uppercase; padding: 20px 25px;}
.navbar-default .nav > li > a { font-family: 'Arial', 'sans-serif'; text-transform: uppercase; letter-spacing: 2px; font-size: 1em; font-weight: 200; color: #31002e; padding: 20px 25px; }
.navbar-default .nav > li > a:focus { color: #FF0000; }
.navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus:hover { color: #FF0000; }
.navbar-default .nav > li.active > a { color: #FF0000; background-color: #111111; }
.navbar-default .nav > li.active > a:focus { color: #FF0000; background-color: #111111; }
.navbar-default .nav > li.active > a:hover, .navbar-default .nav > li.active > a:focus:hover { background-color: #111111; }
.navbar-default .nav > li > a.selected { color: #fff; background-color: black;}
.navbar-default .affix { background-color: #111111; }
.navbar-default .affix .navbar-header .navbar-brand:hover, .navbar-default .affix .navbar-header .navbar-brand:focus { color: #FF0000; }
.navbar-default .affix .nav > li.active > a { color: #FF0000; }
.navbar-default .affix .nav > li.active > a:focus { color: #FF0000; }
.navbar-default .affix .nav > li > a:hover, .navbar-default .affix .nav > li > a:active, .navbar-default .affix .nav > li > a:focus, .navbar-default .affix .nav > li > a:focus:hover { color: #FF0000; }
Any suggestion to solve this problem?

Answer 1

Add a pull-right to your ul should fix it:
pull-right class you can find the source here:
.pull-right {
float: right !important;
}
.pull-left {
float: left !important;
}
https://github.com/twbs/bootstrap/blob/v3.3.7/dist/css/bootstrap.css#L6519-L6524
.
/*///// NAVBAR ////*/
/* while header */
.navbar-default {
background-color: #111111;
border-color: transparent;
-webkit-transition: all 0.35s;
-moz-transition: all 0.35s;
transition: all 0.35s;
font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif';
font-weight: 300;
letter-spacing: 1px;
font-size: 5em;
/* while fixed */
}
.navbar-default .navbar-header .navbar-brand {
font-family: 'Arial', 'sans-serif';
font-size: 1em;
color: #31002e;
font-weight: 200;
text-transform: uppercase;
padding: 20px 25px;
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
color: #FF0000;
}
.navbar-default .navbar-header .navbar-toggle {
font-family: 'Arial', 'sans-serif';
font-size: 1em;
color: #31002e;
font-weight: 200;
text-transform: uppercase;
padding: 20px 25px;
}
.navbar-default .nav > li > a {
font-family: 'Arial', 'sans-serif';
text-transform: uppercase;
letter-spacing: 2px;
font-size: 1em;
font-weight: 200;
color: #31002e;
padding: 20px 25px;
}
.navbar-default .nav > li > a:focus {
color: #FF0000;
}
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus:hover {
color: #FF0000;
}
.navbar-default .nav > li.active > a {
color: #FF0000;
background-color: #111111;
}
.navbar-default .nav > li.active > a:focus {
color: #FF0000;
background-color: #111111;
}
.navbar-default .nav > li.active > a:hover,
.navbar-default .nav > li.active > a:focus:hover {
background-color: #111111;
}
.navbar-default .nav > li > a.selected {
color: #fff;
background-color: black;
}
.navbar-default .affix {
background-color: #111111;
}
.navbar-default .affix .navbar-header .navbar-brand:hover,
.navbar-default .affix .navbar-header .navbar-brand:focus {
color: #FF0000;
}
.navbar-default .affix .nav > li.active > a {
color: #FF0000;
}
.navbar-default .affix .nav > li.active > a:focus {
color: #FF0000;
}
.navbar-default .affix .nav > li > a:hover,
.navbar-default .affix .nav > li > a:active,
.navbar-default .affix .nav > li > a:focus,
.navbar-default .affix .nav > li > a:focus:hover {
color: #FF0000;
}
<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"/>
<!-- Collect the nav links, forms, and other content for toggling -->
<div>
<!-- Main nav bar -->
<ul class="navbar-right nav navbar-nav pull-right">
<% if logged_in? %>
<li>
User's tips
</li>
<li>
New Tip
</li>
<li>
Sign out
</li>
<% else %>
<li>
Sign Up
</li>
<li>
Sign In
</li>
<% end %>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>