Mega Menu - Scroll to ID - Material Design for Bootstrap

Topic: Mega Menu - Scroll to ID

ViS pro premium priority asked 4 years ago

If the Mega Menu contains a large number (10) of dropdown-toggle buttons, then the drop-down submenu is not visible in the mobile version. It is necessary that when you click on the dropdown-toggle button, the scroll to the ID is triggered.

In the previous version (MDB4 jQuery) it was implemented like this:

JS:

$(function () {
$("a.dropdown-toggle").click(function () { 
    if ($(".animated-icon3").hasClass("open")) { $("html, body").animate({ scrollTop: $('#CatalogMenu_open').offset().top - 5 }); }
});});

HTML:

<main id="CatalogMenu_open">....</main>

How to solve this problem in MDB5, using Plain JS or jQuery?

Thanks.

Add comment

ViS pro premium priority answered 4 years ago

0 0 Best answer

The solution of the problem.

jQuery:

$("#CatalogMenu ul.navbar-nav li.nav-item a.nav-link.dropdown-toggle").on("mousedown", function () {
    if (!$(this).hasClass("show") && $(window).width() < 992) {
        $("html, body").animate({ scrollTop: $('#CatalogMenu_open').offset().top - 10 });
    }
});

Add comment