The Hamburger Menu in the Bootstrap Navbar is failing to collapse

My website uses Bootstrap v5.3 and I've added a navbar, but the hamburger icon is not collapsing on mobile devices when clicked. Can someone please review my code to see if there are any issues? I can't figure out what's wrong.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Title </title>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f7959898838483859687b7c2d9c4d9c4">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <script defer src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="680a07071c1b1c1a0918285d465b465b">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bf8f4e9fedba9b5aaaab5a3">[email protected]</a>/dist/umd/popper.min.js"
        integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f4d40405b5c5b5d4e5f6f1a011c011c">[email protected]</a>/dist/js/bootstrap.min.js"
        integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
        crossorigin="anonymous"></script>


    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;1,500&display=swap"
        rel="stylesheet">


    <nav class="navbar navbar-expand-sm navbar-light bg-light">
            
            <a
                href="#"
                class="navbar-brand mb-0 h1">
                Logo
                </a>
                <button
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navbarNav"
                class="navbar-toggler"
                aria-controls="navbarNav"
                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 href="#" class="nav-link active">
                                Home
                            </a>
                        </li>
                        <li class="nav-item active">
                            <a href="#" class="nav-link">
                                About Us
                            </a>
                        </li>
                        <li class="nav-item active">
                            <a href="#" class="nav-link">
                                Courses
                            </a>
                        </li>
                        <li class="nav-item active">
                            <a href="#" class="nav-link">
                                Contact
                            </a>
                        </li>
                        <li class="nav-item active">
                            <a href="#" class="nav-link">
                                Blog
                            </a>
                        </li>
                    </ul>
                </div>
                
        </nav>

I attempted using 

data-bs-toggle="collapse"
, but it didn't have any effect.

htmlcssbootstrap-5

Answer №1

To ensure proper functionality, it is important to include the necessary CDNs in your project. The CSS CDN should be placed in the header section of your HTML file, while the scripts CDNs should be added at the end of the body, following the guidelines outlined in Bootstrap.

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="51333e3e25222523302111647f627f62">[email protected]</a>/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85e6eaf7e0c5b7abb4b4abbd">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ceaca1a1babdbabcafbe8efbe0fde0fd">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
        
        <a
            href="#"
            class="navbar-brand mb-0 h1">
            Logo
            </a>
            <button
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNav"
            class="navbar-toggler"
            aria-controls="navbarNav"
            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 href="#" class="nav-link active">
                            Home
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a href="#" class="nav-link">
                            About Us
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a href="#" class="nav-link">
                            Courses
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a href="#" class="nav-link">
                            Contact
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a href="#" class="nav-link">
                            Blog
                        </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

Unable to use the same hexadecimal HTML entity in the value props of a React JSX component

Can someone explain why this code snippet displays dots as password and the other displays plain hexadecimal codes? <Field label="Password" value="&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;" type="password" /> While this one disp ...

javascripthtmlreactjsjsxflowtype

Clicking on Google Code Prettify does not trigger syntax highlighting

I utilize Google Code Prettify for syntax highlighting my code. Below is the HTML snippet I use: <head> <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script> </head> <body> ...

javascriptjqueryhtmlgoogle-code-prettify

Encountered an issue when attempting to select the password field in order to log into a Google account using

Having some trouble automating the login process for my Gmail account. Managed to find the email element with an ID, but hitting a roadblock trying to locate the Password element as it doesn't have an ID. Here's what I've attempted: passw ...

javascriptpythonhtmlgoogle-chromeselenium

The alignment of the website design is off

I'm in the process of creating a custom template for my website and everything was going smoothly until I encountered an issue with the news bar placement. Instead of appearing below the navbar and welcome message bar, it's showing up above the n ...

csshtml

Is there a way to temporarily toggle classes with jQuery?

Incorporating ZeroClipboard, I have implemented the following code to alter the text and class of my 'copy to clipboard button' by modifying the innerHTML. Upon clicking, this triggers a smooth class transition animation. client.on( "complete", ...

javascriptjquerycsszeroclipboard

Achieving centered body content on a webpage through CSS

I have completed the design of a webpage and utilized CSS for positioning elements. The current layout consists of a Header, Horizontal Menu, and a Content Section with 2 columns, all of which are set to the same width. Although I have successfully aligne ...

css

Retrieve information from a cell containing HTML formatting

Is there a way for me to save a specific text from a cell in Google Sheets into a variable, and then use it to send an email with the text formatted within an HTML table? For example: Cell in Google Sheets: "Lorem ipsum dolor sit amet. Ut tenetur a ...

htmlgoogle-apps-scriptgoogle-sheets

What is the process behind the creation of the class or id fields in HTML for Gmail and Quora? How are these

When using Gmail: <tr class="zA yO" id=":1t4"> While on Quora: <span id="ld_zpQ1Cb_27965"> What is the purpose behind this and what specific tool do they employ to achieve it? ...

htmlcssgmail

Utilizing a switch to deactivate all currently active classes on individual div elements

I'm currently facing an issue with implementing a toggle feature in a particle manner. I have three divs with onclick events and each has a toggle CSS class. My goal is to ensure that when one div is clicked, if the others are active, they revert back ...

javascripthtmlcss

Ways to speed up the disappearance of error messages

There is a minor issue that I find quite annoying. The validation error message takes too long (approximately 3 seconds) to disappear after a valid input has been entered. Let me give you an example. https://i.sstatic.net/8UKrm.png Do you have any tips o ...

javascripthtmlcssangularjserror-handling

Identifying Oversized Files on Safari Mobile: A Guide to Detecting Ignored Large Files in

Mobile browsers such as Safari have a tendency to ignore large files when passed in through the <input type="file">. For example, testing with a 10mb image file results in no trigger of any events - no change, no error, nothing. The user action is si ...

javascripthtmldommobile-safarifile-io

Tips for utilizing the font-family style to span multiple columns

I recently discovered that you can set the background color across table columns using the <colgroup> tag. table { border: 2px solid; border-collapse: collapse; } td { border: 2px solid; } <ta ...

htmlcsshtml-table

CSS properties for SVG image borders not displaying correctly

I'm having trouble creating a border around a round SVG image with the class "lock feature". When I try to add the border in the CSS element ".lock feature", the text "feature" stays white and the border doesn't show up in the browser. However, i ...

htmlcss

Achieving uniform row height in CSS Grid Layout

How do I ensure all footers with a green background have the same height, while also keeping the content height consistent? Current result: https://i.sstatic.net/SrgFq.png Desired output: https://i.sstatic.net/4cr25.png CodePen: https://codepen.io/yas ...

htmlcssflexboxcss-gridgrid-layout

How to position two divs in a row using Bootstrap

Looking at the output below: https://i.stack.imgur.com/pQM8F.png The blue circle is placed in one div, while the text is in another. I'm perplexed by why the first div appears on top and the second doesn't seem to align properly. Here's th ...

htmlcsstwitter-bootstrap-3

Can I specify which modal or component will appear when I click on a component?

Working on a small Angular 5 project, I have a simple component that represents a food product shown below: [![enter image description here][1]][1] This component is nested within my main component. When this component is clicked, a quantity component/m ...

javascripthtmlangularangular-components

Is it feasible to conceal a certain field once the user has chosen another field?

Looking to create an IF statement that will help me establish a specific rule. On a customer portal page, customers can open tickets via a form where they provide information such as "software product" and "environment" from dropdown lists, as well as othe ...

javascripthtmljquerycss

Adjusting the cell size to align with the height of another cell in the same row

Within a table row, I have two cells that contain divs and the height varies due to changing content. Is there a way for one cell to take up 100% height to match the other cell? You can see an example here. The goal is for the second cell and its div to ...

htmlcsscss-tables

Changing the CSS Border of Thumbnails

Take a look at this screenshot of a thumbnail grid. I need to reposition the gray border so that it sits below the price and is consistently aligned across all products. The challenge arises when product titles vary in length, causing the price to be posit ...

ruby-on-railscss

"Pairing div/span elements with sprites for improved web

I've been updating my website by replacing most inline images with sprites. Here's a basic CSS code snippet for the sprite class: .sprite{ background-image:url(...); background-position:...; width: 16px; height:16px; } After learning that nest ...

csshtml