I am having trouble floating a navbar item to the right in my Twitter bootstrap and Rails setup.
I attempted to use this code:
<li class="whoami pull-right"> <%= link_to ("Logged in as: " + current_user.name), edit_user_registration_path , :id=>"Edit account"%> </li>
...but the link remained on the left side with a "float:left;" declaration according to Firebug.
I tried to override the css float property in both bootstrap_and_overrides.css.less and home.html.erb, but it did not work. Firebug showed that there were two css float statements, yet it selected the bootstrap option instead of mine. I am unsure of what I am doing wrong and how to customize the navbar successfully.
Here is a snippet of my code:
application.html.erb:
<!DOCTYPE html>
<html>
<head>
...
</body>
</html>
_navigation.html.erb:
<div class="container span12">
<div class="navbar navbar-fixed-top">
...
</div>
</div>
bootstrap_and_overrides.css.less:
@import "twitter/bootstrap/bootstrap";
...
.whoami {
float:right;
}
Despite applying the float:right style to the last navbar item, it still does not align properly.
There is more information available in this screenshot.
Firebug shows that "float:right;" was detected, but for some reason "float:left;" is being used instead.
I need help understanding where I went wrong.
Please focus responses on:
- Using pull-right and Twitter Bootstrap navbar formatting
- Overriding CSS
- Interpreting Firebug output
Thank you in advance!