Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is my dropdown menu with Bootstrap not working?

In my Rails application, I have the following code for a dropdown menu:

<header class="navbar navbar-fixed-top">
  <div class="navbar-inner">
<div class="container">
    <nav>
            <ul class="nav pull-right">
                <li><%= link_to "Home", root_path %></li> 
            <% if signed_in? %>
                <li id="fat-menu" class="dropdown">
                    <a href="#" class="dropdown-toggle" data toggle="dropdown">
                        Account <b class="caret"></b>
                    </a>
                <ul class="dropdown-menu">
                        <li><%= link_to "Settings", edit_user_path(current_user) %></li>
                        <li class="divider"></li>
                        <li>
                            <%= link_to "Sign out", signout_path, method: "delete" %>
                        </li>
                    </ul>
                </li>
            <% else %>
                <li><%= link_to "Sign in", signin_path %>
            <% end %>
            </ul>
        </nav>
  </div>
</div>
</header>

In my application.js file I have the following code:

    //= require bootstrap

I have no idea why the dropdown menu isn't working, and I have no idea how to fix it. A few days ago, it was working fine, and now it no longer functions properly. Thanks for any help!

like image 819
user1483441 Avatar asked Jul 28 '12 02:07

user1483441


People also ask

How do I add a drop down menu in Bootstrap?

To open the dropdown menu, use a button or a link with a class of . dropdown-toggle and the data-toggle="dropdown" attribute. The . caret class creates a caret arrow icon (), which indicates that the button is a dropdown.

How do I keep my Bootstrap dropdown open?

Set toggle={false} property inside DropdownItem to prevent dropdown from closing.


1 Answers

I figured out the answer from this previous StackOverflow question:

twitter bootstrap drop down suddenly not working

I had to put //= require jquery below my line of code that required bootstrap, and then it worked!

like image 172
user1483441 Avatar answered Sep 28 '22 03:09

user1483441