Issue with collapsing menu button in Bootstrap 5 navbar

I have followed a tutorial on Bootstrap from this YouTube video, but despite following it closely, the collapse button is not functioning as expected. I used a template from the Bootstrap website and ensured that all necessary JavaScript and CSS files are included.

(The test.css file is blank, {% load static %} is specific to the Django framework)

{% load static %}
<head>
    <title>Test Page / Hobbyist.pl</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4c6cbcbd0d7d0d6c5d4e4918a948a9489c6c1d0c596">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <!-- ... -->
    <link rel="stylesheet" href="{% static 'css/test.css' %}">
</head>
<body>
    <header>
        <nav class="navbar navbar-dark bg-dark navbar-expand-md">
            <h1 class="navbar-brand"><img src="{% static 'logo.png' %}" style="width:30;height:30;" class="mr-2 d-none d-md-inline-block align-bottom "></img>Navbar</h1>
           
            <button class="navbar-toggler" type="button">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse">
                TESTT
            </div>
            
            
        </nav>
    </header>
    
    <div class="container">
        <div class="row gy-0">
 
                <div class="col-sm-6 col-md-5 offset-md-1">
                    <img class="img-fluid" src="https://antykorupcja.gov.pl/dokumenty/zalaczniki/4/4-16841.jpg"></img>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum ullamcorper quam, vel auctor odio sagittis quis. Fusce auctor tristique odio, sed molestie purus finibus et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc porttitor leo ante, at egestas libero tempor iaculis. Donec ligula diam, dignissim et arcu at, sodales mollis mauris. Proin quis magna tellus. Morbi posuere faucibus massa, in molestie sem commodo at. Vivamus iaculis neque erat, eu vulputate mauris cursus sit amet. Praesent vitae justo neque. Nunc et elementum tortor.</p>
                </div>
               ...
    </div>
  
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7c5c8c8d3d4d3d5c6d7e792899789978ac5c2d3c695">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

</body>

htmlcsswebbootstrap-5

Answer №1

Ensure you include the necessary attributes in your button tag: 

data-bs-toggle="collapse" & data-bs-target="#test"
. Also, make sure to add the "id" attribute in the corresponding div tag that should expand when the button is clicked. Your revised code should look like this:

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#test">
  <span class="navbar-toggler-icon></span>
</button>

<div class="collapse navbar-collapse" id="test">
    TESTT
</div>
Keep in mind: - The data-bs-target attribute specifies which element should collapse/expand when the button is clicked. Therefore, the value of the "id" attribute and the value of the "data-bs-target" attribute must match. In this example, "test" was used as the value.

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

When I click on the button, the output does not appear

Even though I know how to write this in pure javascript, I am new to angular so when I click submit, nothing happens and I don't get any result. index.html <input type="text" ng-model="username" placeholder="Username"> <input type=" ...

javascripthtmlangularjsangular

Transforming a numerical function into an HTML span tag: A quick guide

Looking for assistance with updating the last line. The goal is to display the current month, obtained from the getMonthText variable, within the <h1><span id="month_year">&nbsp;</span></h1> Starting code. The issue arises to ...

javascriptjqueryhtml

CSS: Trouble with getting SVG sprite to work

I am struggling to combine all my SVG icons into one sprite and then call it from CSS as a background-image, similar to how we do with other images. However, the icons are not showing up on the page. When I open the SVG image in my browser, I encounter thi ...

csssvg

What is the best way to create an element with adjustable width and height dimensions?

Looking for advice on creating a wrapper element without having to repeatedly adjust the height and width properties. The current code snippet sets a fixed size for the wrapper, but is there a more efficient way to achieve this? .search{ background- ...

css

How are the plugins configured for `postcss-import` implemented?

Recently, I've transitioned to using PostCSS exclusively with Webpack. As I explore the functionalities of using postcss-import to inline external stylesheets, I'm noticing that its options offer the ability to configure plugins and transformers ...

csswebpackpostcss

jquery allows you to toggle the visibility of content

There are two divs with a button positioned above them. Initially, only one div, the catalogusOrderBox, is visible. When the button named manualButton is clicked, it should display the manualOrderBox div while hiding the catalogusOrderBox div. The text on ...

javascriptjqueryhtmlcss

Every key must be a string or number; received a function instead

I encountered a peculiar situation while working with Cucumber: Scenario Outline: Protractor and Cucumber Test InValid Given I have already...... When I fill the <number> .... Examples: | number|... | 3 |... |4 |... Moreover, I ...

javascripthtmlangularcucumberjs

Eliminate any unfamiliar or unidentifiable text that appears on the

Utilizing a widget known as "addthisevent," I have successfully enabled users to add a booking for a class to their calendar. However, upon echoing the link to the page, I notice an unexpected '1' next to the button. For reference, please see . ...

phphtml

Guide: "Adding markers to user-uploaded images - A step-by-step tutorial"

I'm struggling to create a website that allows users to upload images and use specific tools. However, I am facing an issue where the marker I want to add is appearing all over the webpage instead of just on the image itself. How can I confine it to o ...

javascriptjqueryhtmlcss

Adjusting the properties of a <span> tag when hovering over a different element

Query: I am trying to dynamically change the color of the span element with classes glyphicon and glyphicon-play when the user hovers over the entire element. How can I achieve this? Recommendation: .whole:hover > span.glyphicon.glyphicon-play { c ...

csshover

A cool CSS technique for adding a subtle inset box shadow to images with the added bonus of centering both vertically and

After discovering a useful trick here to add an inset box-shadow on the images in my gallery, I encountered three challenges: Difficulty centering the image and surrounding anchor vertically and horizontally in their container Unable to limit the image h ...

css

Upload information into database without the need to refresh the webpage

Which programming language or tool would you recommend for efficiently loading data from a webpage into a database without requiring a page refresh? ...

asp.netajaxdjangohtmlcss

Overcoming Troublesome Login Input Box in Web

In an effort to streamline tasks in our office, I am working on automating certain processes. Specifically, this program is designed to log into our insurance company's website and extract information for payroll purposes. Below is the code snippet th ...

javascripthtmlexcelvbaautomation

Maintain the visibility of the jQuery dropdown menu even when navigating to a different page within the

I am experiencing an issue with my dropdown menu. Whenever I click on a "dropdown link", it opens another page on my website, but the menu closes in the process. I want to ensure that the menu stays open and highlights the clicked "dropdown link" in bold. ...

javascriptjqueryhtmlcssajax

Transferring Text from Word to Expression using Copy and Paste

Whenever I try to copy and paste content from a Word document into Expressions Web, I encounter some strange behavior. Often, the top line gets placed in one <span> tag while the rest ends up in another <span> tag, causing a slight gap between ...

htmlcssmicrosoft-expression-web

What impact does the website logo have on a webpage?

Recently, I made the decision to stop using "img" tags for the logo on my webpage. While the logo serves as a design element rather than actual content, I still wanted to maintain control over its appearance. Instead, I opted to display the logo title with ...

htmlseo

Tips for formatting div elements to resemble a table layout (see example below in SharePoint)

Is it possible to format a cluster of related divs so they resemble a table as shown in the attached image? Thank you! <div class="collection" <div class="group"> <div class="label">Label1</div> <div class="value"& ...

htmlcss

Removing the 'div' tag using jQuery in CodeIgniter

I need assistance in removing the added item. $(document).ready(function() { $("#appendex0").click(function() { $(".divcls0").append('<div class="col-sm-10 col-sm-offset-1"><div class="col-sm-3 col-sm-offset-1"><div class="form ...

jqueryhtmlcodeigniter-3

Using Kendo UI Mobile, take advantage of a button to trigger the click action of another

Consider the following situation: HTML <a id="mButton" data-role="button" data-click="clickFn">myButton</a> <asp:ImageButton runat="server" ID="aspButton" style="display: none"></asp:ImageButton> SCRIPT function clickFn(e) { ...

jquerycsskendo-ui

There seems to be a glitch with the Flask flash messaging feature, as

My Flask application includes login and register routes where I aim to display flash messages when username passwords are not matched. Specifically, this issue arises in my index and login routes: @app.route('/') @login_required def index(): ...

pythonhtmlflaskwebflash-message