title: Django Bootstrap Dropdown Menu not working
body: <p>Building my first Django app from a tutorial, following the instructions pretty much verbatim but my navbar dropdown menu is not working no matter what I try, so unable to log out or change password from the navbar.  </p>
  
  <p>I am very new to js, but some things I have tried:</p>
  
  <p>Experimenting w different browsers (doesn't work for Safari or Chrome)</p>
  
  <p>Have looked at similar questions and implemented those techniques but it's still not working (linking to js in the head, making sure to link to js/popper/bootstrap in the correct order, etc.):</p>
  
  <p><a href="https://stackoverflow.com/questions/41415746/django-bootstrap-dropdown-not-working">django bootstrap dropdown not working</a></p>
  
  <p>Have also attempted to create static folders in pages/static/js and pages/static/css but that looks like it may be for more advanced styling than what we're going for here. </p>
  
  <p><a href="https://stackoverflow.com/questions/29359817/bootstrap-template-not-working-correctly-django">Bootstrap template not working correctly Django</a> </p>
  
  <p>Template file/directory below. Issue is between lines 55 and 68 (div class="collapse navbar-collapse") </p>
  
  <p>Thanks in advance for the help. </p>
  
  <pre><code>    &lt;!-- templates/base.html --&gt;
  &lt;!doctype html&gt;
  
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
  
    &lt;!-- Required meta tags --&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
    &lt;!-- Optional JavaScript --&gt;
    &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
    &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"&gt;&lt;/script&gt;
  
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/\ 1.14.3/
    umd/popper.min.js"
    integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAKl8WvCWPIPm49"
    crossorigin="anonymous"&gt;&lt;/script&gt;
  
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/\ js/bootstrap.min.js"
    integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ\ 6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"&gt;&lt;/script&gt;
  
      &lt;!-- Bootstrap CSS --&gt;
  &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
  
  integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
  crossorigin="anonymous"&gt;
  
  
  &lt;!-- &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"&gt;&lt;/script&gt;  --&gt;
  
  
  &lt;title&gt;{% block title %}Newspaper App{% endblock title %}&lt;/title&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4"&gt;
      &lt;a class="navbar-brand" href="{% url 'home' %}"&gt;Newspaper&lt;/a&gt;
      {% if user.is_authenticated %}
        &lt;ul class="navbar-nav mr-auto"&gt;
          &lt;li class="nav-item"&gt;&lt;a href="{% url 'article_new' %}"&gt;+ New&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      {% endif %}
      &lt;button class="navbar-toggler" type="button" data-toggle="collapse"
        data-target="#navbarCollapse" aria-controls="navbarCollapse"
        aria-expanded="false" aria-label="Toggle navigation"&gt;
        &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
      &lt;/button&gt;
  
      &lt;div class="collapse navbar-collapse" id="navbarCollapse"&gt;
        {% if user.is_authenticated %}
          &lt;ul class="navbar-nav ml-auto"&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link dropdown-toggle" href="#" id="userMenu"
                data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="false"&gt;
                {{ user.username }}
              &lt;/a&gt;
              &lt;div class="dropdown-menu dropdown-menu-right" aria-labelledby="userMenu"&gt;
                &lt;a class="dropdown-item" href="{% url 'password_change'%}"&gt;Change password&lt;/a&gt;
                &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                &lt;a class="dropdown-item" href="{% url 'logout' %}"&gt; Log Out&lt;/a&gt;
              &lt;/div&gt;
  
            &lt;/li&gt;
  
          &lt;/ul&gt;
          {% else %}
  
          &lt;form class="form-inline ml-auto"&gt;
            &lt;a href="{% url 'login' %}" class="btn btn-outline-secondary"&gt;
              Log In&lt;/a&gt;
            &lt;a href="{% url 'signup' %}" class="btn btn-primary ml-2"&gt;
              Sign up&lt;/a&gt;
  
          &lt;/form&gt;
  
          {% endif %}
  
      &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;div class="container"&gt;
    {% block content %}
    {% endblock content %}
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ddVL6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ddVL6.png" alt="enter image description here"></a></p>