Issue with Bootstrap 4 Dropdown Menu not directing to specified href destination

Project URL: You can download the file by clicking on "Download bootstrap menu file for testing"

I have implemented a Bootstrap 4 hover menu that works fine on desktop, but on mobile devices, it converts to a clickable menu. Everything is functional so far. However, I would like the hoverable menu to open on hover and then navigate to the specified URL when clicked, just like on a mobile device where clicking on the dropdown icon opens the menu and a click on the anchor tag redirects to a URL. Unfortunately, this functionality is not working as expected.

I tried creating a JSFiddle, but the code didn't work there. So, I hosted the files on my server and also attached a .zip file for your testing purposes. Please provide suggestions on how to make it work.

Here are some images to help you understand what I'm trying to achieve:

On Desktop:

https://i.sstatic.net/8Zkic.jpg

On Mobile Device:

https://i.sstatic.net/BSfal.jpg

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 -->
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Yesterday, I encountered the same issue and found a solution to fix it by simply removing the data-toggle="dropdown" from the parent span in the Testing menu.

Make the following change:

<span class="dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown">
    <a href="https://google.com">Testing Menu</a>
</span>

Change it to:

<span class="dropdown-toggle" id="navbarDropdownMenuLink">
    <a href="https://google.com">Testing Menu</a>
</span>

Just keep an eye on the hovers, especially on mobile menus. If there's a separate clickable caret, then everything should work smoothly.

Answer №2

To resolve the problem, move the <a> element outside of the <span> element. This should rectify the issue. Here is how you can do it:

<a href="https://google.com">Testing Menu</a>
<span class="dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown">
</span>

I have tested this solution and confirmed that it works as expected.

Answer №3

I have incorporated Bootstrap 5 into my project and successfully utilized the <span> tag to insert a separate link within a dropdown menu. Below is an example that demonstrates this functionality. I trust you will find it beneficial.

<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 code snippet is provided 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="04666b6b70777076657444312a342a36">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="60020f0f14131412011020554e504e52">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
    </script>
</body>
</html>

View more details at: https://codepen.io/bhanuka94/pen/poPVwrG

Answer №4

In the event that the parent href of a dropdown is changed to #, you must locate the following code 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 : '#';

This change ensures that the parent's URL remains unaltered and clickable. If you have already activated dropdown on hover, then you are good to go. Otherwise, you may need to either enable it or make the URL clickable only when the dropdown menu is expanded. (Refer to: Bootstrap 4 - Keeping Parent of Dropdown a clickable link )

Answer №5

When using link tags with data attributes, it's important to remove them if unnecessary. In my scenario, I had:

<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 simply modified 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>

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

How to find and pair up custom data attributes that are unfamiliar?

Is there a method to select elements with unspecified custom data attributes? When I say unspecified, I am referring to an element that could appear like this: <div data-unknown="foo"></div> or <td data-someOtherCustomDataAttribute="bar"& ...

htmlcsscss-selectors

Custom Bootstrap 3 Panel Organization

I'm intrigued by the layout shown in the image attached. My attempts to recreate it using a combination of columns and rows have been unsuccessful. Could it be that I'm going about this the wrong way? ...

csstwitter-bootstraplayoutpanel

The footer should always be anchored at the bottom of the webpage, maintaining a consistent position regardless of any changes to the browser's

I've successfully implemented a footer with several buttons that remains positioned at the bottom of the page, 60px above the very bottom, regardless of the content or window size. The CSS I'm using is as follows: #container { min-height: 10 ...

javascriptasp.netcss

Is there a way to use a less mixin or selector to adjust the position depending on the sibling

Currently, I am working on adjusting the position of multiple sibling divs depending on their order. Although they are all currently set to position: absolute, this may change. Each div is a few hundred pixels tall, but I want them to overlap in such a wa ...

htmlcssless

Struggling to get custom button hover styles to work in React?

In the React project I'm working on, there is a button that has been configured in the following manner. <label style={styles.label}> <input style={styles.input} type="file" accept="image/*" onChange={this.onUpload} /& ...

cssreactjsbuttonhover

What exactly is Bootstrap - a CSS framework, a JavaScript framework, or a combination

Being new to Bootstrap, I have taken the time to explore What is Bootstrap? as well as http://getbootstrap.com/. From what I understand so far, Bootstrap is a CSS framework that aids in creating responsive designs that can adapt to various devices. Essent ...

javascripthtmlcsstwitter-bootstrap

Unable to find and load the specified css-font formats (svg, eot, woff, woff2, and ttf) using webpack

Looking to incorporate a unique font into my project: @font-face { font-family: 'bikeshop'; src: url('/src/styles/bikeFont/font/bikeshop.eot?37006833'); src: url('/src/styles/bikeFont/font/bikeshop.eot?37006833#iefix') ...

cssangularsvgwebpackwebpack-2

Is there a way to manipulate CSS to update automatically when new content is loaded via ajax?

I need help with customizing the CSS for 4 image links on my website. Each link is represented by a small image in its normal state and a larger image when hovered over. The content for each link is loaded using ajax. My question is how can I modify the C ...

javascripthtmlcssajax

Concealing a div based on a condition

Having difficulty concealing a div once a specific condition is met. The condition depends on the user logging into a web application. In my CSS file, I have set the multipleBox div to visibility: hidden, along with other styling attributes like border co ...

javascripthtmlcssajaxjsf

What is the best way to apply a class to the grandparent div of an element in AngularJS?

Currently, I have a dynamically generated list of tests: <script id="TestsTemplate" type="text/ng-template"> <article class="tests-main"> <section class="tests"> <div class="test" ng-repeat="test in ...

javascripthtmlangularjs

Troubleshooting JQuery AJAX HTML Problems in Google Chrome and Firefox

I'm facing an issue with my code and I'm not sure what to do. It works perfectly on Internet Explorer, but when I try to open it on Chrome or Mozilla, the links in my menu don't work! I click on them but nothing happens. Can someone please h ...

javascriptjqueryhtmlcssajax

.value not showing correct data in JavaScript

I am attempting to retrieve the value entered by the user in an HTML input field. While I can display a fixed, predetermined value with ease, this is not my intention. My goal is for users to input a numerical value and for that value to be displayed/adj ...

javascripthtml

Slide the menu off to the right

Check out these images to see my progress: Main Image. When you click on the menu, everything shifts right. I've managed to set up the push menu, toggle switch menu, and main divs. Now I need help with centering the 3 lines that are clicked within th ...

htmlcssvertical-alignmentnav

Navigating a Multi-Page Website with Sleek Scrolling

I've been searching for a solution everywhere but haven't had any luck. I'm trying to implement a smooth scroll effect that works seamlessly across multiple pages. For instance, the smooth scroll effect is present on the homepage with naviga ...

javascriptjqueryhtmlnavigationsmooth-scrolling

The form embedded within the <tr> element seems to be malfunctioning

Hey there, I'm facing a little issue with my form that is nested inside a table content. It seems to not be working properly. Let me share the code snippet below: <table> <form name='editpo' method=POST action='js_buat_po.php? ...

htmlformshtml-table

What is the process for utilizing jQuery's advanced ticker feature to extract content from a text file?

I am currently implementing this code on my website: <script> var file = "http://newsxpressmedia.com/files/theme/test.txt"; function getData(){ $.get(file,function(txt){ var lines = txt.responseText.split("\n"); for (var i = ...

javascriptjqueryhtml

Adding the children of JSON objects to every individual div element

How can I add each day's players [day-1, day-2, day-3, day-3] wrapped in a <span> into the .card-body section as required? The goal is to load only four card-body. var vehicles = { "day-1": { "player-1-1": "Ford", "player-1-2": "BMW ...

javascriptjqueryhtmlcss

What steps should I take to correct the alignment of this grid using CSS?

I'm currently working on creating a grid layout for my website and I've almost achieved the desired result. However, I'm facing an issue with the size of the "Projects" title within the grid. I want it to stand out and be larger compared to ...

csscss-grid

Using the jQuery/JavaScript operator is similar to the SQL LIKE query with the wildcard %

Is there a way to search for a specific part of my input using JavaScript/jQuery? I've tried two different methods, but neither yielded any results. <script type="text/javascript> $("#button").click(function () { $("#DivToToggle").toggle(); ...

javascriptjqueryhtmlweb

Encountering issues with Stylus when trying to compile the `@font-face

I'm diving into the world of CSS compilers with Stylus for the first time, and I'm facing an issue with loading Google Web Font URLs correctly. Below is the code snippet causing trouble: @font-face { font-family: 'Roboto'; font-st ...

cssfont-facestylus