We have a menu in one of our sites that we inherited from the previous project. That menu used to work, but now it doesn't. It uses bootstrap libraries version 3
The menu doesn't dropdown, stays frozen, any idea how it can be fixed?
Here is the HTML code
<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">some site 3</a></li>
<li class="col-1"><a href="https://www.site4.com">some site 4</a></li>
</ul>
<br />
</div>
</div>
<!-- row -->
<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 class="col-1"><a href="https://www.site3.com">some site 5</a></li>
<li class="col-1"><a href="https://www.site4.com">some site 6</a></li> </ul>
</div>
</div>
</ul>
</li>
</ul>
</div>
Here is a revised version of your HTML code. Hope this helps.
<!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>