Twitter Bootstrap Responsive Menu adding Weird arrows on Dropdown
-
06-07-2021 - |
Question
I don't understand why this is happening with my responsive twitter bootstrap nav. Here's a screenshot:
It's adding those weird arrows that point up. The carets are intended and those are ok. It goes away if I remove all of the dropdown
classes from the <li class="dropdown">
. But doing that breaks the nav. Otherwise the nav is working great. Here's my markup:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<%= link_to "Tip Share", root_path, :class => "brand" %>
<div class="nav-collapse">
<ul class="nav pull-left">
<% if current_user %>
<li class="dropdown">
<a href="#"class="dropdown-toggle" data-toggle="dropdown">
Sales
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><%= link_to "New Sales", new_sale_path %></li>
<li><%= link_to "Manage Sales", sales_path %></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Shifts
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><%= link_to "New Shift", new_shift_path %></li>
<li><%= link_to "Manage Shifts", shifts_path %></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Employees
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><%= link_to "New Employee", new_employee_path %></li>
<li><%= link_to "Manage Employees", employees_path %></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Positions
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><%= link_to "New Position", new_position_path %></li>
<li><%= link_to "Manage Positions", positions_path %></li>
</ul>
</li>
<% end %>
</ul>
<ul class="nav pull-right">
<% if current_user %>
<li>
<%= link_to root_path do %>
<%= current_user.email %>
<% end %>
</li>
<li><%= link_to 'Log out', logout_path %></li>
<% else %>
<li><%= link_to 'Sign up', signup_path %></li>
<li><%= link_to 'Log in', login_path %></li>
<% end %>
</ul>
</div>
</div>
</div>
</div>
It seems like there's nothing wrong with this markup, but I keep getting these little arrows. I'd rather figure what I'm doing wrong with bootstrap than try to override it with css
How do I get rid of these arrows?
FYI, I'm using the bootstrap-sass gem to import twitter bootstrap.
Solution
Adding .navbar-inner gives it enough specificity to work:
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
.navbar .navbar-inner .nav > li > .dropdown-menu:after {
display: none;
}
}/* end media query */
But, I find it weird that the rule that is included in Boostrap by default doesn't work:
.navbar .nav > li > .dropdown-menu:after
OTHER TIPS
It looks like the real issue is that my media query specific styles are not working. This is actually built into boostrap:
/* line 112, ../../../../../.rvm/gems/ruby-1.9.3-p194@tips/gems/bootstrap-sass-2.1.0.0/vendor/assets/stylesheets/bootstrap/_responsive-navbar.scss */
.nav-collapse .dropdown-menu:before,
.nav-collapse .dropdown-menu:after {
display: none;
}
But that style is not being recognized even though my browser is well below 979px:
So it appears to be an issue with bootstrap media queries that doesn't make sense. I wonder if this has something to do with the asset pipeline in rails.
Update:
Adding this fixes it:
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
.navbar .nav > li > .dropdown-menu:after {
display: none !important;
}
}/* end media query */
But that !important
is really bad. Trying to figure out what I'm doing wrong that would cause this inheritance problem in my css.