Django Bootstrap Dropdown Menu not working

Question

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.

I am very new to js, but some things I have tried:

Experimenting w different browsers (doesn't work for Safari or Chrome)

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.):

django bootstrap dropdown not working

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.

Bootstrap template not working correctly Django

Template file/directory below. Issue is between lines 55 and 68 (div class="collapse navbar-collapse")

Thanks in advance for the help.

    <!-- templates/base.html -->
<!doctype html>

<html lang="en">

<head>

  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
  crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/\ 1.14.3/
  umd/popper.min.js"
  integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAKl8WvCWPIPm49"
  crossorigin="anonymous"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/\ js/bootstrap.min.js"
  integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ\ 6OW/JmZQ5stwEULTy"
  crossorigin="anonymous"></script>

    <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"

integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">


<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>  -->


<title>{% block title %}Newspaper App{% endblock title %}</title>

</head>

<body>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
    <a class="navbar-brand" href="{% url 'home' %}">Newspaper</a>
    {% if user.is_authenticated %}
      <ul class="navbar-nav mr-auto">
        <li class="nav-item"><a href="{% url 'article_new' %}">+ New</a></li>
      </ul>
    {% endif %}
    <button class="navbar-toggler" type="button" data-toggle="collapse"
      data-target="#navbarCollapse" aria-controls="navbarCollapse"
      aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarCollapse">
      {% if user.is_authenticated %}
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link dropdown-toggle" href="#" id="userMenu"
              data-toggle="dropdown" aria-haspopup="true"
              aria-expanded="false">
              {{ user.username }}
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userMenu">
              <a class="dropdown-item" href="{% url 'password_change'%}">Change password</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="{% url 'logout' %}"> Log Out</a>
            </div>

          </li>

        </ul>
        {% else %}

        <form class="form-inline ml-auto">
          <a href="{% url 'login' %}" class="btn btn-outline-secondary">
            Log In</a>
          <a href="{% url 'signup' %}" class="btn btn-primary ml-2">
            Sign up</a>

        </form>

        {% endif %}

    </div>
</nav>

<div class="container">
  {% block content %}
  {% endblock content %}

</div>

</body>

</html>

Lemon.py · Accepted Answer · 2020-04-01 19:13:37Z

1

I copied your code and had the same problem but after swapping the bootstrap.js script for a different one it started working.

The problem was a backslash in the bootstraps js URL.

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/\ js/bootstrap.min.js"
  integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ\ 6OW/JmZQ5stwEULTy"
  crossorigin="anonymous"></script>

After https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/ there is \ js/bootstrap.min.js

but it should be https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js

So when we switched to the newest js it fixed the problem but that js is still valid if you fix the path.

https://getbootstrap.com/docs/4.4/getting-started/introduction/

edited Apr 1, 2020 at 19:13

answered Apr 1, 2020 at 15:41

Lemon.py

81911 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3763074 Over a year ago

this worked. Thanks! As someone new to Bootstrap, does this mean that they change their js script regularly, and will need to be changed again? Or was there any other clue in the original js link that let you know this was the problem? Just hoping to learn from this error. Thanks again.

Lemon.py Over a year ago

I have updated my answer, the actual problem was in your scripts src. There was a backslash in the path that shouldn't be there. So switching the JS to the new version wasn't a fix because of the old JS was broken but rather than a typo that causes it to break.

user3763074 Over a year ago

Oh, ok. I think the author did that to break up the line of code in the text for the tutorial but I forgot to take it out. Thanks.

Collectives™ on Stack Overflow

Django Bootstrap Dropdown Menu not working

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related