Issue with Bootstrap nav-bar not collapsing after hamburger icon has been used to expand it

Having a Bootstrap-related issue that I hope you can help me with. Whenever I expand my menu using the burger icon, it fails to collapse when I try to close it. Can you please point out my mistake and provide some guidance on how to prevent this from happening in the future? Thank you.

    <body>
              <nav id="mainNavBar" class="navbar navbar-expand-md navbar-dark bg-dark">
                <a class="navbar-brand" href="#">CANDY</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navLinks"
                  aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>

        
                <div class="collapse navbar-collapse" id="navLinks">
        
                  <ul class="navbar-nav">
                    <li class="nav-item">
                      <a class="nav-link" aria-current="page" href="#">HOME</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">ABOUT</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">TICKETS</a>
                    </li>
        
                  </ul>
    
                </div>
              </nav>`
</body>
javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

highlighted text

<!doctype html>
<html lang="en">
   <head>
      <!-- Necessary meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- Bootstrap CSS -->
      <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="43212c2c37303731223303766d726d70">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
      <title>Hello, world!</title>
   </head>
   <body>
      <nav id="mainNavBar" class="navbar navbar-expand-md navbar-dark bg-dark">
         <a class="navbar-brand" href="#">CANDY</a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navLinks"
            aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navLinks">
            <ul class="navbar-nav">
               <li class="nav-item">
                  <a class="nav-link" aria-current="page" href="#">HOME</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link" href="#">ABOUT</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link" href="#">TICKETS</a>
               </li>
            </ul>
         </div>
      </nav>
      `
      <!-- Optional JavaScript; choose one of the two! -->
      <!-- Option 1: Bootstrap Bundle with Popper -->
      <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="17757878636463657667572239263924">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
      <!-- Option 2: Separate Popper and Bootstrap JS -->
      <!--
         <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed8e829f88addfc3dcddc3df">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
         <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2d0ddddc6c1c6c0d3c2f2879c839c81">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
         -->
   </body>
</html>

I gave it a try and it worked perfectly. Just ensure you are using the correct version of bootstrap.

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

Bootstrap 4 radio buttons are not aligning properly with the padding

There seems to be an issue with the alignment of Bootstrap 4 custom radio buttons and my left padding. Here is a snippet: https://i.sstatic.net/vWTNo.png This is part of the code for displaying an item <div class="p-4"> <ul class="d-flex ...

htmlcssbootstrap-4radio-button

The console encountered an issue trying to parse the specified value "NaN", which may be out of range or unable to be parsed

I have a project in progress that involves building an exchange platform. I am looking to utilize jQuery/JavaScript to extract data from a select option and then transmit the value to an API URL. However, whenever I run my code, I encounter an issue where ...

javascriptjquery

Error: The session ID is not currently active

I encountered a problem with my tests failing when running them on TFS, showing the following error: WebDriverError: No active session with ID Failed: No active session with ID Interestingly, these same tests are passing locally. Everything was working ...

javascriptseleniumtfsprotractorjasmine2.0

JavaScript tool package with non-JavaScript alternative

Currently in search of a reliable Javascript widget toolkit that boasts a modern UI design like Dojo, incorporates AJAX for navigation, and effects. Essential requirement is flexibility and seamless fallback to an HTML-only version for console users. Whi ...

javascriptajaxuser-interfacewidgettoolkit

What is the best way to distinguish Xpath when dealing with several elements that share identical attributes and text?

I need to find and click on the link labeled "Customer One". The current xPath I am using is: //div[contains(@class,'client-info') and contains(div/text(),'Customer')] When using Firepath, this xPath returns four separate elements (I ...

htmlxmlseleniumxpathwebdriver

Unable to transform Symbol data into a string - Error when making a React AJAX delete call

I'm encountering an issue where I am getting a Cannot convert a Symbol value to a string error in the console. My tech stack includes React v15 and jQuery v3. https://i.stack.imgur.com/qMOQ8.png This is my React code snippet: var CommentList = Reac ...

javascriptjqueryajaxreactjs

The directive for Content Security Policy in Django framework

I am having trouble importing font-awesome into my application. I've tried the following code: <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> However, this is causing an err ...

cssdjangogoogle-app-engine

What is the best way to link a button to a form in Angular?

I'm currently utilizing Angular 6.x and I am looking to link a submit button that is located outside of the form in the DOM. Essentially, I want to achieve something similar structurally to this: <button type='submit' form='myform&a ...

javascriptangular

Efficient State Management with React-Redux for Streamlined HTTP Requests

In the process of developing a React-Redux application, I have encountered a situation where I need to display a cancel button while a specific HTTP request is ongoing. Upon successful execution of the request, the UI should display the results. If the use ...

javascriptreactjsreduxes6-promise

Tips for centering text on a webpage using the div element in HTML

I need help aligning the text "Monitoring Engineering Dashboard" to the right side of the image in the top-left corner. Currently, it is positioned below the image (Refer to the image below) <div style="width:1200px; margin:0 auto ...

htmlcsstext-align

Incorrectly parsing data in ReactJS leads to errors

After making significant progress, the focus of this question has strayed too far. Therefore, it will not be continued. *===== The issue at hand revolves around fetching data from an API, receiving results, and encountering difficulties when attempting t ...

javascriptnode.jsreactjs

jQuery used to select elements that are added dynamically on the page

Event Delegation in jQuery is a concept I am well-acquainted with. To listen for events on dynamically added elements, the following syntax is used: $('body .some-class').on('click', '.dynamically_added_ele', function(){}); ...

javascriptjqueryevent-handlingdynamically-generatedevent-delegation

Is it Possible to Alter the Title Attribute in AngularJS with ng-class?

My website currently displays an image that updates based on the user's selection from a dropdown menu. The title of the image is set to "test", but I need it to display a different message depending on which image is being shown. Can this be achieved ...

htmlangularjsng-class

Are there any JavaScript libraries available that can mimic SQLite using localStorage?

My current application makes use of SQLite for storage, but I am looking to switch it up to make it compatible with Firefox and other browsers. I've been considering localStorage as an option. However, I've noticed that localStorage lacks some o ...

javascriptsqlsqlitelocal-storage

The ng-controller is not functioning properly even when being correctly invoked

I tried out some simple angularjs code, utilizing nodejs, angularjs, and html. Here are my files: https://github.com/internial/test. I decided not to include the node_modules folder as it was too large. On localhost:8080, this is the result: {{1 + 64}} ...

javascriptangularjsnode.jscontrollerclient-side

Using CSS to rearrange the order of specific div elements with the nth-child() selector when targeting different

I am attempting to design a centered navbar for a webpage. The navbar consists of 5 divs and my goal is to have the third div become the first one when the screen size goes below 600px. Here is the HTML code: <div class="mainmenu"> < ...

htmlcss

Customize Selected Options in Multi SelectPicker in Real-Time

In my code, I am working with a selectpicker and using JavaScript to set the selected options dynamically. The syntax for this is: $('.mySelectPicker').selectpicker('val', ['one', 'two', 'three']); As par ...

jquerybootstrap-4bootstrap-selectpicker

Is jQuery the solution for organizing hierarchical data effectively?

After struggling to create my own jQuery plugin for sorting nested categories, I decided to seek out existing solutions. I spent hours trying to make this specific plugin work, , but couldn't get it to function properly. Are there other options for d ...

phpjavascriptjquerymysqlhierarchical-data

Creating a 3D 'rope' using three.js to link two dynamic objects动态对象

Currently, I am in the process of designing an industrial robot model consisting of moving parts, with movement controlled via a dat.GUI panel. Here is a screenshot depicting the model My current dilemma lies in figuring out how to create the rope compon ...

javascriptgraphicsthree.js3d-modellingdat.gui

What is the process of implementing a particular FormControl from a FormArray in my HTML file?

My FormArray initialization code is as follows: this.contents.forEach(content=> { this.formArray.push( new FormControl(content.text, Validators.required)); }); Now, I am trying to associate a specific FormControl with my textarea by using i ...

htmlangularformstypescript