CODEWITHSUNDEEP
javascripthtmlcssbootstrap-4
katek1094
katek1094

Reputation: 92

Bootstrap4: NavBar toggle button does not work

While reducing size fo the window and buttons on navbar disappears and the toggle button is showing up but does not work to display the drop down menu Link for jQuery and other stuff are copy-pasted form Bootstrap website the same with bootstrap link

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>29er team POL</title>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'css/my_style.css' %}"/>

</head>
<body>
<div class="jumbotron">
    <div class="container">
        <nav class="navbar navbar-expand-md navbar-light bg-light">
            <a class="navbar-brand" href="{% url 'index' %}">
                <img src="{% static 'images/logo_1.png' %}" width="100" height="60" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url 'homepage:klasa' %}">Klasa 29er</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url 'homepage:kluby' %}">Kluby</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url 'homepage:kalendarz' %}">Kalendarz regat</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Archiwum wyników</a>
                    </li>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">coś</a>
                    </li>

                </ul>
            </div>
        </nav>
    </div>

</div>

</body>
</html>

Upvotes: 0

Views: 64

Answers (1)

Akber Iqbal
Akber Iqbal

Reputation: 15031

on the <button> you have data-target="#navbarSupportedContent" but there is no div with that ID

change this from:

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

change it to:

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

complete snippet:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand" href="{% url 'index' %}">
    <img src="{% static 'images/logo_1.png' %}" width="100" height="60" alt="">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="{% url 'homepage:klasa' %}">Klasa 29er</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="{% url 'homepage:kluby' %}">Kluby</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="{% url 'homepage:kalendarz' %}">Kalendarz regat</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Archiwum wyników</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">coś</a>
      </li>

    </ul>
  </div>
</nav>

Upvotes: 1

Related Questions