CODEWITHSUNDEEP
htmlcssdjangobootstrap-4django-templates
user3763074
user3763074

Reputation: 353

Django Bootstrap Dropdown Menu not working

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>

enter image description here

Upvotes: 0

Views: 3017

Answers (1)

Lemon.py
Lemon.py

Reputation: 819

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/

Upvotes: 1

Related Questions