Question

I have a bootstrap dropdown in the navbar that works perfectly, except when I shrink the browser into tablet or phone size (< 767px wide). Code for the navbar is:

<div class="navbar navbar-fixed-top">
 <div class="navbar-inner">
  <div class="container-fluid">

   <a href="<%= root_url %>" class="brand brandtag"></a>
   <a class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
   </a>

  <div class="pull-right"> # DROPDOWN THAT WORKS SPORADICALLY
   <div id="user-nav">
    <div class="not-logged-in">
     <a class="dropdown-toggle btn btn-inverse" href="<%= new_user_session_path %>" data-toggle="dropdown">
      Login <span class='caret'></span>
     </a>
     <div class="dropdown-menu">
      <%= render "devise/sessions/new_from_dropdown" %>
     </div>
    </div>
   </div>
  </div>

  <div class="nav-collapse">
    <ul class="nav">
      <li class="active"><a>Link 1</a></li>
      <li class="active"><a>Link 2</a></li>
      <li class="active"><a>Link 3</a></li>
      <li class="active"><a>Link 4</a></li>
    </ul>
  </div><!--/.nav-collapse -->
</div>

and my javascript is straightforward:

jQuery ->
  $(".dropdown-toggle").attr("href", "#").dropdown()
  $('.dropdown-menu form label.hide').hide()
  $('.dropdown-menu input, .dropdown-menu label').on 'click', (e) ->
    e.stopPropagation()

The dropdown works perfectly fine in larger sizes (> 767px), but once the screen drops below that size, the dropdown stops showing. I can resize the screen larger or smaller and the dropdown will come back or go away, respectively, as it passes through the 767px width.

Does anyone know how to fix this? Seems to be something in bootstrap’s javascript, but I can’t figure out what.

Answer 1

For some reason, wrapping the “dropdown-toggle” and “dropdown-menu” divs in another div with class=”dropdown” solves this problem. So the code above works with the very minor change:

<div class="pull-right"> # DROPDOWN THAT WORKS SPORADICALLY
 <div id="user-nav">
  <div class="dropdown not-logged-in"> # <-- "dropdown" class added
   <a class="dropdown-toggle btn btn-inverse" href="<%= new_user_session_path %>" data-toggle="dropdown">
    Login <span class='caret'></span>
   </a>
   <div class="dropdown-menu">
    <%= render "devise/sessions/new_from_dropdown" %>
   </div>
  </div>
 </div>

I have no idea why this only affects the mobile & tablet sizes, but such is the pitfall of using another person’s framework!