Bootstrap 4: Dropdown menu href link not going to href location - html

Question

Project URL: http://www.vrtechweb.com/bootstrap-4-menu/bootstrap.html
You can download my file by click on "Download bootstrap menu file for testing"
I have bootstrap 4 hover menu and this hover menu on desktop but when its open on mobile device its convert to clickable menu. Its all working. But i want to do hoverable menu open on hover but when click on that should go to url which i given on anchor tag. same as mobile device when click on dropdown icon then open menu and when i click on anchor tag should go to url. Its not working.
I have creted js fiddle my code not working on js fiddle so i have created this file on my server and also attached my .zip file so you can test my file and please give me suggestion how would work
Here is some pic so easily you can understand what i am saying
On Desktop
on Mobile Device
HTML Code
<!-- Static navbar -->
<nav class="navbar navbar-expand-md navbar-light bg-light btco-hover-menu">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<span class="dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown">
Testing Menu
</span>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item dropdown-toggle" href="https://www.facebook.com">Submenu</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Submenu action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another submenu action</a>
</li>
<li>
<a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Subsubmenu action aa</a>
</li>
<li>
<a class="dropdown-item" href="#">Another subsubmenu action</a>
</li>
</ul>
</li>
<li>
<a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Subsubmenu action bb</a>
</li>
<li>
<a class="dropdown-item" href="#">Another subsubmenu action</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Submenu action 2</a>
</li>
<li>
<a class="dropdown-item" href="#">Another submenu action 2</a>
</li>
<li>
<a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Subsubmenu action 1 3</a>
</li>
<li>
<a class="dropdown-item" href="#">Another subsubmenu action 2 3</a>
</li>
</ul>
</li>
<li>
<a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu 3</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Subsubmenu action 3 </a>
</li>
<li>
<a class="dropdown-item" href="#">Another subsubmenu action 3</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- Main component for a primary marketing message or call to action -->
</div>
<!-- /container -->

Answer 1

I had this same problem just yesterday and to fix it you need to remove the data-toggle="dropdown" from the Testing menu parent span.
So change the
<span class="dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown">
Testing Menu
</span>
to
<span class="dropdown-toggle" id="navbarDropdownMenuLink">
Testing Menu
</span>
Just be cautious about the hovers, especially on mobile menu. If you have a separate clickable caret then it should be fine.

Answer 2

Just put the <a> element outside of the <span> element. That should fix your issue. Like that:
Testing Menu
<span class="dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown">
</span>
I tested it and it should work.

Answer 3

I am using Bootstrap 5 and I used the <span> tag to add a separate link to the dropdown text. Here is an example that worked for me. I hope this example will help you.
<li class="nav-item dropdown">
<span class="nav-link">
<a href="https://www.google.com/"
style="">Training</a>
<a class="dropdown-toggle" href="#" id="dropdown05" data-bs-toggle="dropdown"
aria-expanded="false"></a>
<ul class="dropdown-menu" aria-labelledby="dropdown05">
<li><a class="dropdown-item" href="#">Item 01</a></li>
<li><a class="dropdown-item" href="#">Item 02</a></li>
<li><a class="dropdown-item" href="#">Item 03</a></li>
<li><a class="dropdown-item" href="#">Item 04</a></li>
</ul>
</span>
</li>
The full example is given below.
.my-dropdown-link{
color: rgba(0,0,0,.55);
text-decoration:none;
}
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light" aria-label="Fifth navbar example">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Test Site
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample05"
aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample05">
<ul class="nav navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown">
<span class="nav-link">
<a class="my-dropdown-link" href="https://www.google.com/"
style="">Training</a>
<a class="dropdown-toggle my-dropdown-link" href="#" id="dropdown05" data-bs-toggle="dropdown"
aria-expanded="false"></a>
<ul class="dropdown-menu" aria-labelledby="dropdown05">
<li><a class="dropdown-item" href="#">Item 01</a></li>
<li><a class="dropdown-item" href="#">Item 02</a></li>
<li><a class="dropdown-item" href="#">Item 03</a></li>
<li><a class="dropdown-item" href="#">Item 04</a></li>
</ul>
</span>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="./contact.php">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</body>
</html>
Snippet from: https://codepen.io/bhanuka94/pen/poPVwrG

Answer 4

If the the dropdowns parent href is replaced by #, track down the following in bootstrap navwalker;
// If item has_children add atts to <a>.
if ( isset( $args->has_children ) && $args->has_children && 0 === $depth && $args->depth !== 1 ) {
$atts['href'] = '#;
$atts['data-toggle'] = 'dropdown';
$atts['aria-haspopup'] = 'true';
$atts['aria-expanded'] = 'false';
$atts['class'] = 'dropdown-toggle nav-link';
$atts['id'] = 'menu-item-dropdown-' . $item->ID;
} else {
(...)
}
Replace
$atts['href'] = '#';
with
$atts['href'] = ! empty( $item->url ) ? $item->url : '#';
The parents url will now remain untouched and clickable. If you have already enabled dropdown on hover you are all set. If not you would either need to do so, or to make the URL clickable only when the dropdown is expanded. (See: Bootstrap 4 - Keeping Parent of Dropdown a clickable link )

Answer 5

if the link tag use data attributes that should be remove,
in my case i have
<a class="dropdown-item" href="www.example.com" data-toggle="modal" data-
target="#logoutModal">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i> Logout
</a>
i just changed it to
<a class="dropdown-item" href="www.example.com">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i> Logout
</a>