Issue with multiple dropdowns not functioning in Bootstrap 5

Before you criticize my imports, here are the scripts I am using:

  <script src="~/lib/jquery/dist/jquery.min.js"></script>
   <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <script src="~/js/site.js" asp-append-version="true"></script>

I am facing an issue where my dropdown menu does not open at all, and in the web developer tools, the underlying HTML appears to be invisible. Here is the relevant HTML code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e7c71716a6d6a6c7f6e5e2a3028302f">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3 header-company">
  <div class="container">
    <a class="navbar-brand reflection-container" asp-area="" asp-page="/Index" style="margin-bottom: 30px;">
      <img src="/" alt="Logo" id="logo" style="margin-left: 10px;" />
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse justify-content-end" style="margin-top: 75px;position:static;">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link text-dark nav-headlines" asp-area="" asp-page="/Test1">TEST1</a>
        </li>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle text-dark nav-headlines" data-toggle="dropdown" asp-area="" asp-page="/Test2">TEST2</a>
          <div class="dropdown-menu navbarSupportedContent">
            <a class="dropdown-item nav-link text-dark nav-headlines" asp-area="" asp-page="/Test3">TEST3</a>
            <a class="dropdown-item nav-link text-dark nav-headlines" asp-area="" asp-page="/Test4">TEST4</a>
            <a class="dropdown-item nav-link text-dark nav-headlines" asp-area="" asp-page="/Test5">TEST5</a>
            <a class="dropdown-item nav-link text-dark nav-headlines" asp-area="" asp-page="/Test6">TEST6</a>
            <a class="dropdown-item nav-link text-dark nav-headlines" asp-area="" asp-page="/Test7">TEST7</a>
            <a class="dropdown-item nav-link text-dark nav-headlines" asp-area="" asp-page="/Test8">TEST8</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a href="/Test9" class="nav-link dropdown-toggle text-dark nav-headlines" data-toggle="dropdown">TEST9</a>
          <div class="dropdown-menu">
            <a class="dropdown-item nav-link text-dark nav-headlines nav-divider" asp-area="" asp-page="/Test10">TEST10</a>
            <a class="dropdown-item nav-link text-dark nav-headlines" asp-area="" asp-page="/Test11">TEST11</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcded3d3c8cfc8ceddccfc88928a928d">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

Don't forget that Bootstrap 4 relies on Popper.js, as stated in the documentation.

Make sure to add Popper.js to your code before including the Bootstrap JavaScript file.

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

Is there a way to potentially utilize window.open() to open a specific section of a webpage?

My HTML page consists of 2 div blocks and 2 links. I want to open the content of the first div in a new window when the first link is clicked, and the content of the second div in another new window when the second link is clicked. You can find the code h ...

javascriptjqueryhtmlcss

Create a dynamic webpage where two div elements glide in opposite directions

My apologies for this seemingly basic question, but I am wondering if anyone knows how to create an animation where a div moves up and down while scrolling, similar to the effect on this website: On that site, near the footer, there are 2 sections with 2 ...

jqueryhtmlcss

Tips for keeping my wordpress menu at the forefront

This piece of code is responsible for controlling the main menu on my website. Currently, it's set up so that when I scroll down, the menu disappears, and when scrolling up, it reappears. However, I would like the menu to always remain displayed at t ...

jquerycsswordpress

Retrieving the selected value from a dropdown menu before it is altered using vanilla JavaScript

I am trying to implement a feature where the previous value of a dropdown is captured when it is changed. Essentially, I need to compare the previous and current values of the dropdown and perform an action based on that information. For example, if Option ...

javascripthtml

Refresh the click event on a newly added element in the backbone framework

As a newcomer to backbone.js and using CodeIgniter as my PHP Framework, I encountered a challenge while developing an existing system that uses a backbone.js library. The problem is straightforward if approached with jQuery, but due to the use of backbone ...

phpjqueryhtmlcodeigniterbackbone.js

Issues with Carousel Plugin Functionality

**Hey everyone, I could really use some help. As a beginner coder, please forgive any errors in my code. I am currently working on a webpage where I need to incorporate a carousel plugin within a panel body to display the latest photos. The code provided ...

jqueryhtmlcsstwitter-bootstrap

Can anyone explain why my navbar text is not aligning in the center?

I am struggling to center the text in one of my two navbars. As a newcomer to both navbars and bootstrap, I am having difficulty figuring out why I can't achieve this. Should I be making changes on the bootstrap side or can it be fixed within the < ...

htmlcssbootstrap-4

What is the best way to attach a button to a mat-drawer?

I am facing an issue with aligning a button to a mat drawer located to the right of the screen to ensure a clear overall design. Check out this example How can I achieve this alignment? My current approach involves placing the button inside the drawer an ...

htmlcssangularangular-material

Passing the final element of a POST array to a different page

I am having trouble retrieving the correct array values from the form. In my code, I am invoking the form option value 3 times, which is defined in the database. Here is an example of what is currently in the database: https://i.sstatic.net/G4JQx.png Wh ...

phphtmlformsselect

Alignment problem detected in Firefox and Safari, but works perfectly in Chrome

Currently dealing with a CSS problem on my website that is only appearing in Safari and Firefox, while Chrome displays it correctly. The images are not positioning correctly and are stacking instead of being placed in each box as intended. I've expe ...

htmlcssfirefoxsafari

The jQuery menu is malfunctioning in Internet Explorer due to the Document Mode being set to Quirks

I am encountering an issue where the below code is not functioning properly in Internet Explorer's document mode quirks. Each time I hover over the submenu, its length doubles unexpectedly. Can someone please provide assistance with this matter? < ...

javascriptjquerycsskendo-ui

Aligning content with CSS styling

I am facing a challenge with aligning buttons in three different td tags, as the text content within each varies. I want the buttons to line up evenly regardless of the amount of text present. Is there a solution that does not involve setting a fixed parag ...

htmlcss

Troubleshooting Django: Issue with template extension causing static image not to be found in child template

For my personal project, I decided to learn Django. Initially, I created two separate apps, "API" and "Search". As development progressed, I merged the search functionality into the API app and updated the views accordingly. I also designed a base template ...

htmldjangodjango-templatesdjango-staticfiles

Analyzing the browser's address bar and creating a navigation link derived from it

Is there a way to create a script that can extract information from the address bar? For example, if we have a link like this: We want to be able to take the "page-2011" part and dynamically generate navigation links like this: « <a href="/page-2010 ...

javascriptjqueryhtmlcss

Core MVC - Adjusting Font Size

After setting up an MVC Core App with automatic scaffolding, I am now faced with the challenge of adjusting the font size in my html View. The question is: How can I change the font size in bootstrap.css? There seem to be multiple font sizes available an ...

c#htmlcssasp.net-core-mvc

The variable in the HTML input value is not fully visible when filling out the HTML form

I am working with a Python Flask code where I have passed a dictionary to an HTML form. The table in the form correctly displays both keys and values, but when trying to populate a form field with the value from the dictionary, only the first word is displ ...

pythonhtmlinputflask

Trigger file upload window to open upon clicking a div using jQuery

I utilize (CSS 2.1 and jQuery) to customize file inputs. Everything is working well up until now. Check out this example: File Input Demo If you are using Firefox, everything is functioning properly. However, with Chrome, there seems to be an issue se ...

javascriptjquerycssfile-upload

Launching a bootstrap modal within another modal

I am facing a minor issue with two modal popups on my website. The first modal is for the sign-in form and the second one is for the forgot password form. Whenever someone clicks on the "forgot password" option, the current modal closes and the forgot pas ...

javascriptjquerytwitter-bootstrap

When the user clicks on the body, I want the element to slide up, which will then slide down when the button is clicked

As a novice in Jquery, I am currently implementing a simple slide toggle on a button. Initially, the div is set to display none, and when the button is clicked, the slide toggle function is triggered. This works well. However, I also want the div to slide ...

jqueryhtmlcss

Save user input data into an Excel file using PHPExcel

Could someone assist me with storing values from my form inputs to Excel using PHPExcel? I have successfully stored data from my table to Excel, but now I want to store the values from my inputs. Can anyone help me, please? Example of the form inputs: ent ...

javascriptphphtmlmysqlphpexcel