Guide for activating dropdown functionality in the Bootstrap HTML5 menu

We've inherited a menu from a previous project on one of our sites, but it's no longer working. The menu utilizes Bootstrap libraries version 3

The dropdown functionality is not functioning and the menu appears to be frozen. Any suggestions on how we can resolve this?

Below is the HTML code snippet:

         <div class="" id="navbar1">
             <ul>
                 <li class="dropdown Some_header" style="width:190px; " ><a href="#" class="dropdown-toggle header_dd_link" style="padding-left:10px; padding-right:10px;" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img src="../images/usFlag.svg" class="TradeIconUS" />Some title<small><span class="caret"></span></small></a>                         
                     <ul class="dropdown-menu dd_1" style="width:850px; ">
                         <div class="row">
                             <div class="col-sm-3">
                                 <ul class="multi-column-dropdown">
                                     <li><a href="https://www.somemainsite.com">Some main site</a></li>
                                     <div class="header_dropdown_bar"></div>
                                     <li class="col-1"><a href="https://www.site1.com">some site 1</a></li>
                                     <li class="col-1"><a href="https://www.site2.com">some site 2</a></li>
                                 </ul>
                                 <br />                                 
                             </div>
                             <div class="col-sm-3">
                                 <ul class="multi-column-dropdown">
                                     <li><a href="https://www.trade.gov/research">Another main site</a></li>
                                     <div class="header_dropdown_bar"></div>
                                     <li class="col-1"><a href="https://www.site3.com"&...
htmlcssbootstrap-4

Answer №1

Here is an updated version of your HTML code. I hope this revised code proves to be helpful for you.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 3 Dropdown Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div id="navbar1" class="navbar navbar-default">
  <ul class="nav navbar-nav">
    <li class="dropdown Some_header" style="width:190px;">
      <a href="#" class="dropdown-toggle header_dd_link" style="padding-left:10px; padding-right:10px;" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        <img src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Flag_of_the_United_States.svg" class="TradeIconUS" width="20" /> 
        Some title
        <small><span class="caret"></span></small>
      </a>
      <ul class="dropdown-menu dd_1" style="width:850px;">
        <div class="row">
          <div class="col-sm-3">
            <ul class="multi-column-dropdown">
              <li><a href="https://www.somemainsite.com">Some main site</a></li>
              <div class="header_dropdown_bar"></div>
              <li><a href="https://www.site1.com">some site 1</a></li>
              <li><a href="https://www.site2.com">some site 2</a></li>
            </ul>
          </div>
          <div class="col-sm-3">
            <ul class="multi-column-dropdown">
              <li><a href="https://www.trade.gov/research">Another main site</a></li>
              <div class="header_dropdown_bar"></div>
              <li><a href="https://www.site3.com">some site 3</a></li>
              <li><a href="https://www.site4.com">some site 4</a></li>
            </ul>
          </div>
        </div>

        <div class="row">
          <div class="col-sm-3">
            <ul class="multi-column-dropdown">
              <li><a href="https://www.trade.gov/attend-event">Some main site</a></li>
              <div class="header_dropdown_bar"></div>
              <li><a href="https://www.site5.com">some site 5</a></li>
              <li><a href="https://www.site6.com">some site 6</a></li>
            </ul>
          </div>
        </div>
      </ul>
    </li>
  </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</body>
</html>

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

Tips for maintaining the active tab in Jquery even after the page is reloaded, especially for tabs that are constantly changing

$(document).ready(function(){ $('.scroll_nav li a').click(function(){ $('li a').removeClass("active_scroll"); $(this).addClass('active_scroll'); $('ul li .btn-br_all_gun').click(function(){ ...

jquerypythonhtmldjango

Issues with Implementing Bootstrap Dropdown Menu in Django

https://i.sstatic.net/ddVL6.png ...

htmlcssdjangobootstrap-4django-templates

Determining the location of the hamburger item on the bar

As I work on creating a hamburger icon, I am faced with the challenge of accurately positioning the bars without guessing. The height of the hamburger is 24px, and I initially thought placing the middle bar at half the height (12px or top: 12px) would cent ...

htmlcsssass

Adding a class to the wrapper of an input checkbox element and placing a class on the label/input field in CakePHP 3

To achieve a bootstrap checkbox layout in CakePHP 3 form helper, I want to include the custom checkbox class alongside the default "input checkbox" div and apply a class to the label as well. ...

htmlbootstrap-4cakephp-3.0

Is the mr-auto class in Bootstrap not functioning as intended?

<div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav **mr-auto**> <li class="nav-item active"> <a class="nav-link" href="homepa ...

c#asp.netasp.net-mvc-4bootstrap-4

The code snippet $(this).nextAll("#...").eq(0).text("***") isn't functioning as expected

I am experiencing an issue with the following line of code: $(this).nextAll("#status").eq(0).text("Deleted"). I am trying to insert the text "Deleted" in a <span> tag, but it does not seem to be working... Here is my code: admin.php PHP: $sql = "SE ...

javascriptjqueryhtml

What is the best way to deploy a website from a Windows Forms application? (C#)

My goal is to create a Windows application that can function in the background while also having a customizable front-end Windows Forms GUI. Additionally, I want this program to be able to generate a small web page that can be accessed by other devices and ...

c#.nethtml

Is there a way to delete highlighted text without using execCommand and changing the font color

With my current use of JavaScript, I am able to highlight or bold a selected text range successfully. However, I am unsure how to undo the bold and unhighlight the text if the button is clicked again and the selected range is already bolded or highlighted. ...

javascripthtmlcss

What is the significance of the A tag when parsing a URL?

So, I encountered a problem that involved parsing a URL to extract the hostname and pathname, then comparing the extracted pathname with a string. If you need help with this issue, check out this post: How do I parse a URL into hostname and path in javasc ...

javascripthtmldom

Refreshing the <object> element with AngularJS

I'm currently working on a web project that involves users uploading PDF files. I've encountered an issue where, after a user deletes a previously uploaded file and tries to upload a new one, the preview still shows the deleted file. The preview ...

html.netangularjsurl

Having difficulty implementing datetimepicker with Bootstrap 4 on NPM

I've been facing an issue trying to get datetimepicker to work on Bootstrap4 using npm. Despite compiling the code without any errors and inspecting without finding any issues, it seems that the CSS is not loading properly for the plugin. Here are th ...

npmbootstrap-4datepickerbootstrap-datepickerbootstrap-datetimepicker

"Hidden panels in Sencha Touch only respond to show() and hide() methods after a resize event

Check out this demonstration of a Sencha Touch app by visiting this link. The button located in the bottom-left corner is supposed to show or hide the menu panel on top of the "Location info goes here" bar, but it seems to be functioning in an unexpected m ...

javascripthtmlgoogle-chromesencha-touchextjs

Troubleshooting the Gutter Problem in jQuery Isotope and Masonry

Currently, I am utilizing the Isotope jQuery plugin. While it is a fantastic tool, I am encountering a minor issue with aligning items in masonry mode. The width of my container is 960px, and I aim to have 4 items perfectly aligned as if they were adhering ...

javascriptjquerycssjquery-masonry

Differences between the iframe src attribute and the iframe page source retrieved by Selenium's getPageSource() function

Even after reading the switch-to-iframe documentation, I am still uncertain about what driver.getPageSource() will return once driver.switchTo().frame(frame element) is executed. When referring to page source, I looked at the definition in getPageSource() ...

htmlseleniumselenium-webdriveriframeselenium-chromedriver

Is it possible to generate an HTML element by utilizing an array of coordinates?

I have a set of 4 x/y coordinates that looks like this: [{x: 10, y: 5}, {x:10, y:15}, {x:20, y:10}, {x:20, y:20}] Is there a way to create an HTML element where each corner matches one of the coordinates in the array? I am aware that this can be done usi ...

javascripthtmlcss

When scrolling a semi-parallax effect in a resized window, I notice a calming presence of empty white

I recently acquired a WordPress website from its previous owner, and I'm encountering an issue with the parallax section at the top. It seems to be scrolling at a slightly slower pace than the rest of the page. I've tried adjusting the width and ...

jqueryhtmlcsswordpress

Laravel controller not permitting data entry for a specific ID

I am currently working on a project that involves creating a system where users can leave comments on specific pages. Within my employercommentscontroller, I have a create function that looks like this: public function create($id) { $user = User::whe ...

phphtmllaravel

The 'utf-8' codec is unable to interpret the byte 0x96 at position 227, as it is an invalid start byte

Recently, I began working with Django. Unfortunately, I encountered an error that I haven't been able to solve. Can anyone explain why this error is occurring? Specifically, I am utilizing {% extends "base.html" %} on my login page. Here is the exa ...

cssdjango

Is the div not visible? Only prepend then

Looking to prepend a div only when the specified conditions are met. $(".loginForm").submit(function() { var username = $("input.username").val(); var password = $("input.password").val(); var errorvisible = $("body").has(".alert.error ...

javascriptjqueryhtmlcss

injecting the value of this.value into an HTML input markup using JavaScript's insertCell function

Having a bit of trouble with a JavaScript function that creates a table and inserts a cell using insertCell(0); In this cell, there's an HTML form input that triggers another function onKeyUp, where I pass in 4 parameters. However, the last parameter ...

javascriptjqueryhtml