<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/static/nav.css"> <!—secondary bootstrap code—!>
<link rel="stylesheet" href="/static/bootstrap.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script> </head>
<body>
<header>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/link">Link</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/link">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Link</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/link">Paid Services</a></li>
<li><a class="dropdown-item" href="/link">Flash Documentation</a></li>
<li><a class="dropdown-item" href="/link">SMS Bomb</a></li>
<li><a class="dropdown-item" href="/link">MDickie Projects</a></li>
<li><a class="dropdown-item" href="/link">BxPP</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Link</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/link">Link</a></li>
<li><a class="dropdown-item" href="/link">Link</a></li>
<li><a class="dropdown-item" href="/link">Link</a></li>
<li><a class="dropdown-item" href="/link">Link</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Link</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/link">Link</a></li>
<li><a class="dropdown-item" href="/link">Link</a></li>
<li><a class="dropdown-item" href="/link">Link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
Hello community of Stackoverflow. This bootstrap header doesn't dropdown on mobile devices. I have the JS and CSS, and I really don't know what do. Can someone help? Replace the "/" with atproducts.xyz since it triggered the spam filter.
The issue is in your local css. I've replace this rows
<link rel="stylesheet" href="/static/nav.css"> <!—secondary bootstrap code—!>
<link rel="stylesheet" href="/static/bootstrap.css">
With the official bootstrap CDN and it works.
So your page should be
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/link">Link</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/link">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Link</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/link">Paid Services</a></li>
<li><a class="dropdown-item" href="/link">Flash Documentation</a></li>
<li><a class="dropdown-item" href="/link">SMS Bomb</a></li>
<li><a class="dropdown-item" href="/link">MDickie Projects</a></li>
<li><a class="dropdown-item" href="/link">BxPP</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Link</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/link">Link</a></li>
<li><a class="dropdown-item" href="/link">Link</a></li>
<li><a class="dropdown-item" href="/link">Link</a></li>
<li><a class="dropdown-item" href="/link">Link</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Link</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/link">Link</a></li>
<li><a class="dropdown-item" href="/link">Link</a></li>
<li><a class="dropdown-item" href="/link">Link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
I've also moved the script at the bottom, before the body closing .
Add the following code to your <head> tag and it will work. Also do not download the single file of bootstrap instead download the whole bootstrap and then include it in your project.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
...
</head>
Also move the bootstrap JS link to the end of your <body> tag.
<body>
...
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
Related
I am working with Bootstrap 5 Navigation bar's collapse button functionality in Angular 11. It works fine in desktop site but not in mobile view. One reason I am thinking is that I don't have popper.js installed in the app. Do I need popper.js with Bootstrap5(angular.json file given below)?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
<li><a class="dropdown-item" href="#">A third link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
I am trying to make a Bootstrap navbar that will display the items that can be seen in the code. All of my other links work and take me to their respected pages, but whenever I hit the dropdown in the navbar nothing happens. It is the dropdown portion that I can not get to work and I am not sure what else I need to add. Any help will be greatly appreciated.
This is Bootstrap5
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #4f2fb6;">
<a class="navbar-brand" href="#">GCU</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"></button>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="tando.html">Course Matrix</a>
</li>
<li class="nav-item">
<a class="nav-link" href="media.html">Media</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Topics
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#topic1" data-bs-toggle="collapse">Topic 1</a></li>
<li><a class="dropdown-item" href="#topic2" data-bs-toggle="collapse">Topic 2</a></li>
<li><a class="dropdown-item" href="#topic3" data-bs-toggle="collapse">Topic 3</a></li>
<li><a class="dropdown-item" href="#topic4" data-bs-toggle="collapse">Topic 4</a></li>
<li><a class="dropdown-item" href="#topic5" data-bs-toggle="collapse">Topic 5</a></li>
<li><a class="dropdown-item" href="#topic6" data-bs-toggle="collapse">Topic 6</a></li>
<li><a class="dropdown-item" href="#topic7" data-bs-toggle="collapse">Topic 7</a></li>
</ul>
</li>
</ul>
</div>
</nav>
I wanted to add a droplist to the 4th element in my navbar .
Under "ESPACE PARTICULIER" I need to get 2 options .
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">A PROPOS NOUS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">COURS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ESPACE PARTICULIER</a>
</li>
<li class="nav-item">
<a class="button-highlight" href="#">Sign in</a>
</li>
</ul>
</div>
You are using Bootstrap so it's easy to do it Jus take alook in this Bootstrap Dropdown
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">A PROPOS NOUS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">COURS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ESPACE PARTICULIER</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="button-highlight" href="#">Sign in</a>
</li>
</ul>
</div>
You need to look at the manual
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">A PROPOS NOUS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">COURS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">ESPACE PARTICULIER</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
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">
<!-- import bootstrap 4 css-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!--import local css-->
<link rel="stylesheet" type="text/css" href="./css/common_style.css">
<title>test</title>
</head>
<body>
<header>
<!-- Top navbar-->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<!-- Navbar brand -->
<a class="navbar-brand" href="*">Navbar</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topNav">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="topNav">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false"> Test </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Test </a></li>
<li><a class="dropdown-item dropdown-toggle" href="#"> Test 1 </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="">HTML</a></li>
<li><a class="dropdown-item" href="">CSS</a></li>
<li><a class="dropdown-item" href="">JavaScript</a></li>
<li><a class="dropdown-item" href="">Bootstrap</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item dropdown-toggle" href="">Other </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="">Multi level 1</a></li>
<li><a class="dropdown-item" href="">Multi level 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#"> Test 2 </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="">HTML</a></li>
<li><a class="dropdown-item" href="">CSS</a></li>
<li><a class="dropdown-item" href="">JavaScript</a></li>
<li><a class="dropdown-item" href="">Bootstrap</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item dropdown-toggle" href="">Other </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="">Multi level 1</a></li>
<li><a class="dropdown-item" href="">Multi level 2</a></li>
</ul>
</li>
</ul>
</li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item dropdown-toggle" href="#">Other </a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false"> More items </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Dropdown item 1 </a></li>
<li><a class="dropdown-item dropdown-toggle" href="#"> Dropdown item 2 with extra words </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="">HTML</a></li>
<li><a class="dropdown-item" href="">CSS</a></li>
<li><a class="dropdown-item" href="">JavaScript</a></li>
<li><a class="dropdown-item" href="">Bootstrap</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item dropdown-toggle" href="">Other </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="">Multi level 1</a></li>
<li><a class="dropdown-item" href="">Multi level 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#"> Dropdown item 3 </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="">Another submenu 1</a></li>
<li><a class="dropdown-item" href="">Another submenu 2</a></li>
<li><a class="dropdown-item" href="">Another submenu 3</a></li>
<li><a class="dropdown-item" href="">Another submenu 4</a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#"> Dropdown item 4 </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="">Another submenu 1</a></li>
<li><a class="dropdown-item" href="">Another submenu 2</a></li>
<li><a class="dropdown-item" href="">Another submenu 3</a></li>
<li><a class="dropdown-item" href="">Another submenu 4</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 4 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 5 </a></li>
</ul>
</li>
</ul>
<!-- Links -->
<form class="form-inline ml-auto">
<div class="md-form my-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"></div>
</form>
</div>
</nav>
</header>
</body>
Css:
/*Mult-level dropdown menu css*/
#media (min-width: 992px){
.dropdown-menu li {
position: relative;
}
.dropdown-menu:hover > li:hover > .submenu {
display: inline-block;
}
.dropdown-menu .dropdown-toggle:after {
-ms-transform: rotate(-90deg); /* IE 9 */
-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
transform: rotate(-90deg);
margin-top: 10px;
float: right;
}
.nav-item .submenu {
display: none;
left:100%;
top:-8px;
}
}
Snipping:
Run on jsfiddle: https://jsfiddle.net/nLcq9b62/1/
As you can see, the caret been pushed down because of float:right, but if remove float:right will align caret next to the content, which is not desired.
How can i right align caret while caret not been pushed down? Also, I want keep code simple and easy, so make as little changes as possible will be very nice.
ok, I find a way.
By setting .dropdown-toggle to absolute and position it to right:10px fixed it. Thanks for help.
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 -->
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.
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.
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
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 )
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>