CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
socialdtk
socialdtk

Reputation: 67

Menu Not Collapsing on Small Devices

It is my understanding that all list items inside of:

<div id="navbar" class="navbar-collapse collapse">

should collapse into a single menu at a defined breakpoint. I have been troubleshooting the below code for several hours and cannot find why it is not working: 

<header>
  <link href="{{ STATIC_URL }}css/bootstrap.min.css" type="text/css" rel="stylesheet" />
  <link href="{{ STATIC_URL }}css/cloudserv.css" type="text/css" rel="stylesheet" />
  <link rel="shortcut icon" type="image/png" href="{{STATIC_URL}}/img/favicon.ico"/>
</header>

<div class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/"><img src="{{ STATIC_URL }}img/logo.png"></img></a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
      {% for category in main_menu %}
      {%  if category.item_set.all %}
        <li class="dropdown">
          <a href="{{ category.url_name }}" class="dropdown-toggle" data-toggle="dropdown">{{ category.name }}<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="/{{ category.url_name }}">{{ category.name }}</a></li>
            <li class="divider"></li>
            {% for item in category.item_set.all %}
            <li><a href="/{{ category.url_name }}/{{ item.url_name }}">{{ item.name }}</a></li>
            {% endfor %}  
          </ul>
        </li>
        {% else %}   
        <li><a href="/{{ category.url_name }}">{{ category.name }}</a></li>
        {% endif %}
      {% endfor %}
      </ul>
    </div>
  </div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{{ STATIC_URL }}js/jquery-1.11.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>

Please note that all code contained inside of brackets is related to Django's templating system. Also, all relevant Bootstrap files have been included and all other aspects of the menu appear to be working fine.

Upvotes: 0

Views: 599

Answers (1)

Schmalzy
Schmalzy

Reputation: 17324

The .navbar-toggle's data-target attribute needs to target the collapse div. Since it has an ID of navbar you can target it using a CSS style selector like data-target="#navbar"

Before

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">

After

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">

UPDATE:

You are also missing the meta tag below in you head.

<meta name="viewport" content="width=device-width, initial-scale=1">

You need this for mobile devices, otherwise mobile browsers will zoom out and you will not get the mobile breakpoints.

Upvotes: 3

Related Questions