Having an issue with the menu bars in my Rails 4 app. Specifically, I'm struggling with two divs overlapping.
The goal is to align the "Register" and "Log In" blocks with the left-hand side menu while floating right. It should not float slightly below the Bootstrap 3 nav div like it currently does:
This problem is especially noticeable when a user signs in or out:
The sidebar displaying "Register" or user name and "Log In" or "Log Out" is within the class nav pull-right. The relevant part of code from bootstrap.css appears to be this:
.pull-right {
float: right !important;
}
Here is a snippet of my application.html.erb code:
<div class="navbar navbar-fixed-top">
<div class ="navbar-inner">
<div class="container">
<b><a href="#" class="brand">WHEELS Registration</a></b>
<ul class ="nav">
<%= link_to "All Events", events_path %>
</ul>
<ul class="nav pull-right">
<% if user_signed_in? %>
<li><%= link_to current_user.full_name, edit_user_registration_path %> </li>
<li><%= link_to "Log Out", logout_path %></li>
<% else %>
<li><%= link_to "Register", register_path %></li>
<li><%= link_to "Log in", login_path %></li>
<% end %>
</ul>
</div>
</div>
</div>
<div class="container">
<% flash.each do |type, message| %>
<div class = "alert <%= flash_class type.to_s %> ">
<button class="close" data-dismiss="alert">x</button>
<%= message %>
</div>
<% end %>
<%= yield %>
</div>
You can access the app here for further assistance:
(I haven't included the Ruby on Rails tag as this seems more focused on CSS and bootstrap concerns, but will add it if deemed necessary)