Troubleshooting the Bootstrap4 NavBar toggle button malfunction

When the window is resized, the buttons on the navbar disappear and the toggle button appears but does not function to display the dropdown menu. The jQuery and other links have been copied from the Bootstrap website.

<!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8dfde2fdfde8ffa3e7fecdbca3bcbba3bd">[email protected]</a>/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' %}">Class 29er</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url 'homepage:kluby' %}">Clubs</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url 'homepage:kalendarz' %}">Regatta Calendar</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Results Archive</a>
                    </li>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Something</a>
                    </li>

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

</div>

</body>
</html>
javascripthtmlcssbootstrap-4

Answer №1

you've specified data-target="#navbarSupportedContent" on the <button>, but there is no corresponding div with that ID

update this from:

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

to:

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

full code 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changing the orientation of a dropdown menu from horizontal to vertical

Hello, I am seeking assistance to transform the top dropdown menu layout into a vertical one similar to the menu on the left side. Any help would be greatly appreciated as I am running out of ideas! Thank you in advance! @charset "utf-8"; /* CSS Docum ...

htmlcss

Iterating through an object in Javascript using dynamically changing property names

Is there an efficient way in Javascript to iterate through the property names of objects in an array? I have objects with properties from guest1 to guest100. Instead of manually looping through each property, is there a method to loop through all the gues ...

javascript

How to keep a window/tab active without physically staying on that specific tab

Whenever I'm watching a video on a website and switch to another tab, the video stops playing. But when I switch back to the original tab, the video resumes. Is there a trick to prevent the video from stopping? I've already tried using scrollInto ...

javascripthtml

Transmitting JSON data object

Sending a JSON Object to JSP Page After following the provided link, I discovered that one of the answers suggests creating a JSON object using the following constructor: JSONObject jsonObj=new JSONObject(String_to_Be_Parsed); Upon downloading the JSON ...

javajavascriptjson

Handling asynchronous functions in MongoDB: Ways to ensure proper closure of connection when using Mongoose

The issue at hand is more pertinent to MongoDB and its mongoose driver, rather than the async/await code in question. In my *.js file, I have the following code: const model1 = require("../../db/model1"); const model2 = require("../../db/model2"); const ...

javascriptnode.jsmongodbmongoose

steps for setting up babel-cli and babel-preset-react

I attempted various methods of installing babel-cli babel-preset-react Here's what I tried: npm install --save-dev babel-cli babel-preset-react However, when I run babel -h An error message appears saying The program 'babel' can be found ...

javascriptreactjsnpmbabeljsbabel-preset-env

What is the method to determine the size of a file in Node.js?

Have you ever wondered how to accurately determine the size of a file uploaded by a user? Well, I have an app that can do just that. The code for this innovative tool is provided below: Here is the snippet from server.js: var express = require('expr ...

javascriptjquerynode.js

Ways to iterate and combine two associative arrays in jQuery

I have a total of 15 sections, each known as bases, with their own alphabet buttons. My goal is to link the alphabet letters with their corresponding base/section. For instance, if a user clicks on the letter "B" under base 7, I want to show that the user ...

javascriptjqueryarrays

Clicking on the icon will cause the table to expand

Is there a way to simply expand the line by clicking on the arrow icon (expand_more) instead of expanding the entire section? If you want to see code examples in Angular Material, check out this link: https://stackblitz.com/angular/oyybnyopyemm?file=app%2 ...

javascriptangularangular-material

My .php file seems to be having trouble loading any of the external css or javascript files

Being new to PHP, I recently created a .php website and connected it to a local test server using MAMP. However, I encountered an issue where the CSS and JavaScript from external files weren't working, even though the PHP functionality (such as sendin ...

phpjavascripthtmlcss

Choosing a key from Angular's controller

Here is the combo box I am working with: <select data-ng-model="data.selectedChannel" data-ng-options="salesChannel.value for salesChannel in salesChannels"> </select> In my controller, I have a function that calls a factory to retrieve a k ...

angularjshtmlangular-controller

Tips for creating an array key dynamically while working with several <select> elements in PHP

<select id = 'formMonths' multiple = 'multiple' name = 'formMonths[]'> <option value="1">item1</option> <option value="2">item2</option> <option value="3">item3</option> </select> ...

phphtmlforms

Is it possible to create a unique texture transition effect in three.js?

Currently, I am working on creating a model viewer in three.js using opengl. One of the key features I am trying to implement is the ability to dynamically change textures while the model is running. So far, I have managed to achieve this functionality, ...

javascriptthree.jswebgl

My custom font is not compatible with the browser on my asp.net site

I'm having trouble embedding my own font in my .aspx file. Google Chrome and Firefox don't seem to support the font, while IE does. Can someone please provide guidance on how to successfully embed the font in an asp.net page? Below is my code: ...

javascripthtmlcssasp.netfonts

SecretKey is not valid, FirebaseError code: 400

Currently, my backend is powered by Firebase. However, when I initiate it using NODE_ENV=debug firebase emulators:start --inspect-functions, the following messages are displayed: emulators: Starting emulators: auth, functions, storage ⚠ functions: Ru ...

javascriptnode.jsfirebase

Enhancing VueDraggable (sortable.js) with drag out feature

I am currently utilizing VueDraggable for effortless and efficient sorting of elements. However, I am in need of a feature that detects when a dragged element leaves its parent so that a particular function can be executed. To provide some context, think o ...

htmlvue.jsdrag-and-drop

Denied rendering of design due to incompatible MIME type

Just delved into the world of node / express and decided to test my skills by creating a simple tip calculator app. However, I seem to have hit a roadblock with loading my CSS. The console keeps throwing this error: "Refused to apply style from &apos ...

javascriptcssnode.jsexpressnpm

Can the front end acquire JSON data from a URL, save it as a JSON file with a unique name, and store it in a designated location?

I'm facing a straightforward problem with my React Native project. I am attempting to create a script that will be executed during the build process to fetch JSON data from a URL and then store it as a JSON file with a unique name in a specific direct ...

javascriptjsonreact-native

Django experiencing issue of "Unable to locate view" even though the view is clearly defined

Having an issue with the django 4.0.4 framework, I am seeing the error message "Reverse for 'upload' not found. 'upload' is not a valid view function or pattern name". The strange thing is that it was working fine earlier today, and I&a ...

pythonhtmldjangodjango-viewsdjango-urls

Angular encounters an issue where it is unable to access a property within a directive

Currently, I am utilizing the angular-media-player module from https://github.com/mrgamer/angular-media-player. Here is how my HTML code looks: <audio media-player="audioControl" data-playlist="list" a="{{audioControl.ended}}"> I am able to access ...

javascriptangularjsangularjs-directive