Bootstrap 5 navbar dropdown link doesn't work when clicking and doesn't expand when hovering

Question

I want to make the navbar dropdown item to open when hovering and to have all items clickable. The thing i can't make working is to send me to the page courses.html when i click it, i made the open on hovering work with css but is there maybe a different approach to it?

I use the normal Bootstrap 5 Java script and css

All the other items will just scroll to e section withing course.html thats why i have ther just # for now.

<div class="col my-auto" style="padding-right: 0;padding-left: 0;">
    <nav class="navbar navbar-expand-lg col">
        <div class="container-fluid">
            <div id="offcanvasNavbar" class="offcanvas offcanvas-end" tabindex="-1" aria-labelledby="offcanvasNavbarLabel">
                <div class="offcanvas-header"><button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button></div>
                <div class="offcanvas-body">
                    <ul class="navbar-nav flex-grow-1 justify-content-end pe-3">
                        <li class="nav-item"><a class="nav-link active" aria-current="page" href="home.html" style="font-family: 'Zen Old Mincho', serif;">ホーム</a></li>
                        <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" aria-expanded="false" data-bs-toggle="dropdown" href="courses.html" role="button">各教室のご案内</a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#">瑞艸書道教室</a></li>
                                <li><a class="dropdown-item" href="#">日本語教室</a></li>
                                <li><a class="dropdown-item" href="#">いけばな教室</a></li>
                            </ul>
                        </li>
                        <li class="nav-item bg-primary bg-opacity-50"><a class="nav-link active" href="access.html">教室情報</a></li>
                        <li class="nav-item"><a class="nav-link" href="news.html">お知らせ</a></li>
                    </ul>
                </div>
            </div><button class="navbar-toggler ms-auto" data-bs-toggle="offcanvas" type="button" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        </div>
    </nav>
</div>

thanks in advance

I tried some ways to make it work with custom javascript but nothing helped and i deleted it so i don't have it anymore.

Answer 1

To make a Bootstrap menu dropdown show on hover rather than click, you need to modify the default behaviour of Bootstrap’s dropdown component. This can be done by using CSS to display the dropdown menu when the user hovers over the dropdown trigger element, instead of using JavaScript to toggle the dropdown on click.

Assuming you have included the Bootstrap CSS and JavaScript files in your HTML document, you can add a custom CSS rule to enable hover on the dropdown menu like this:

.dropdown:hover .dropdown-menu {
      display: block;
}

Then you need to replace the default Bootstrap JavaScript code for dropdowns with a custom script that triggers the dropdown on hover like this:

$(document).ready(function() {
      $('.dropdown').hover(function() {
        $(this).addClass('show');
        $(this).find('.dropdown-menu').addClass('show');
      }, function() {
        $(this).removeClass('show');
        $(this).find('.dropdown-menu').removeClass('show');
      });
});

See How to Make Menu Dropdown on Hover using Bootstrap for more.