Menu
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">
<a href="https://google.com">Testing Menu</a>
</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 -->
604
Solution : The dropdown should be toggled via data attributes or using javascript. In the above program, we have forgotten to add a data attribute so the dropdown is not working. So add data-bs-toggle="dropdown" to toggle the dropdown.
Example Explained. Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.
To open the dropdown menu, use a button or a link with a class of . dropdown-toggle and the data-toggle="dropdown" attribute. Add the . dropdown-menu class to a <div> element to actually build the dropdown menu.
To right-align a menu, use . dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .
The Bootstrap 4 dropdown component may contain the list of links and more that can be used as contextual menus, in navbars etc. The dropdown menu can be opened by a clicking on a button or link (also split buttons) and these are toggleable.
By default, as you click the button or link dropdown, the menu opens in downward direction. You may also open this in other directions. For that, simply add the .dropup class in the main div element that contains button. Only this line of code is changed than the first dropdown menu example:
7 Project URL:http://www.vrtechweb.com/bootstrap-4-menu/bootstrap.htmlYou 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.
However, Bootstrap does add built-in support for most standard keyboard menu interactions, such as the ability to move through individual .dropdown-item elements using the cursor keys and close the menu with the ESC key.
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">
<a href="https://google.com">Testing Menu</a>
</span>
to
<span class="dropdown-toggle" id="navbarDropdownMenuLink">
<a href="https://google.com">Testing Menu</a>
</span>
Just be cautious about the hovers, especially on mobile menu. If you have a separate clickable caret then it should be fine.
152
Just put the <a> element outside of the <span> element. That should fix your issue. Like that:
<a href="https://google.com">Testing Menu</a>
<span class="dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown">
</span>
I tested it and it should work.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
