To make this change, all you need to do is remove the "data-toggle" attribute from the parent element! update: thanks for the suggestion, here is an example of the code modification: I modified the following:

<a class="p-2 text-dark dropdown-toggle" data-toggle="dropdown" style="font-size:1.25rem;" href= {% url 'link' %}>Link</a>

to this:

<a class="p-2 text-dark dropdown-toggle" style="font-size:1.25rem;" href= {% url 'link' %}>Link</a>

by simply removing the data toggle attribute, the dropdown menu now becomes hoverable with a clickable parent link.

I aimed for simplicity in my approach. The solution involves detecting the second click on the dropdown button or link, and then redirecting to the corresponding page.

$('.navbar .dropdown > a').click(function() {
 if (!$(this).hasClass("parent-clicked")) {
    $(this).addClass("parent-clicked");
  } else {
    location.href = this.href;
  }
});

This functionality also applies when the view is collapsed.

I utilized Joe's response and modified it to suit my requirements

/*
 * Only proceed to the link if the dropdown is already open (if the dropdown is a link)
 */
$('.navbar ul.navbar-nav > .dropdown > a[href]').click(function() {
    var dropdown = $(this).next('.dropdown-menu');
    /*
     * The dropdown may not exist
     * The dropdown may already be open due to css
     * (e.g., display: block from a custom :hover setting) 
     * or a "show" class on the element which also sets display: block;
     */
    if (dropdown.length == 0 || $(dropdown).css('display') !== 'none') {
        if (this.href) {
            location.href = this.href;
        }
    }
});

The Bootstrap 4 html code for this is

<header class="navbar"> 
    <ul class="nav navbar-nav">            
        <li class="nav-item dropdown">
            <a class="nav-link" href="/planning" data-toggle="dropdown">
                Planning
            </a>
            <ul class="dropdown-menu">
                <li class="dropdown-item">
                    <a href="/day-planning">Day planning</a>
                </li>
            </ul>
        </li>
    </ul>
</header>

Enhancing Bootstrap 4 Dropdown Link Clickability

To improve user experience, I have modified the dropdown link in Bootstrap 4 to make it more clickable. Instead of the original small triangle icon, I have implemented a larger plus icon that is easier for users to interact with. The parent href link still functions normally, but clicking on the plus icon will now expand the dropdown menu.

By dynamically adjusting the behavior of the dropdown link based on the screen size, users can easily access the dropdown menu without any usability issues.

/* -----------------------------------------------------------------------
Make Bootstrap dropdown "a" link clickable
But when clicking plus icon, show the dropdown
--------------------------------------------------------------------------- */
function clickableDropdownLink() {

    if (window.matchMedia("(max-width: 992px)").matches) {
        const dropdownToggle = $('.navbar .dropdown > a');
        dropdownToggle.append('<span class="dropdown-icon"></span>');
        dropdownToggle.removeAttr('data-toggle');

        $('.navbar .dropdown > a').click(function(e) {
            e.preventDefault();
            if ((e.target.tagName == 'A')) {
                const route = $(this).attr("href");
                window.location.href = route == '/' || route == '#' ? window.location.href : route;
                return;
            }
        })

        const dropdownIcon = $('.navbar .dropdown > a > span.dropdown-icon');
        dropdownIcon.click(function() {
            const parentLink = $(this).parent("a.nav-link");
            parentLink.parent(".nav-item").toggleClass("show");
            parentLink.next(".dropdown-menu").toggle();
        })

    }
}
...

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>

This code snippet enables the toggling of a dropdown menu when clicked, utilizing the href attribute to trigger the dropdown functionality. To customize this behavior to fit your specific requirements -

Modify the href attribute to redirect to the desired project page and implement a hover event to display the dropdown menu using either jQuery or CSS. To show the dropdown menu, simply include the "open" class in the

<li class="nav-item dropdown">

Check out CSS Example, Check out Jquery Example

My approach involves detecting the area clicked by the user on the dropdown button/link and redirecting to the corresponding URL.

  // Function to handle click on dropdown menu parent
  $('.navbar .dropdown > a').on('click', function(e) {
    let elementBegin = $(this).offset()['left']; // Get X position of link

    // Calculate the width of the menu using text's length
    // Make sure to wrap the text inside a span tag
    let spanWidth = $(this).find("> span").width();
    let clickAreaLength = spanWidth * 0.9; // 90% of width is clickable area

    let clickPositionX = e.pageX; // Get click position

    // Redirect if click position is within the clickable area
    if (clickPositionX < elementBegin + clickAreaLength) {
      location.href = this.href;
    }
  });

This implementation is also effective in the collapsed view (mobile).

//Adjusting bootstrap dropdown behavior on parent click
let clickCount = 0;
document.querySelector('.dropdown-toggle').addEventListener('click',(event)=>{    
    clickCount++;
    if(clickCount > 1 && event.target.classList.contains('show')){
        location.href = event.target.href
        clickCount = 0;
    }
})

This simple JavaScript solution ensures that the second click on the parent element will redirect to a location if the dropdown contains the open class.

Using jQuery for Bootstrap 4 & Bootstrap 5:

    var dropdownToggle = ".dropdown-toggle";

    $(dropdownToggle).click(function() {
        $(dropdownToggle + '.show').click(function() {
            if(!$(this).hasClass('show')) {
                location.href = $(this).attr('href');
            }
        });
    });

Implementing with pure JavaScript for Bootstrap 5:

    var dropdownToggle = ".dropdown-toggle";

    document.querySelectorAll(dropdownToggle).forEach(function(anchor) {
        anchor.addEventListener('click', function() {
            document.querySelectorAll(dropdownToggle + '.show').forEach(function(element) {
                element.addEventListener('click', function() {
                    if(!element.classList.contains('show')) {
                        location.href = this.getAttribute('href');
                    }
                });
            });
        });
    });