Skip Navigation

[Closed] Need to make included Bootstrap 4 mobile menu auto – hide on clink or scroll

This support ticket is created 2 years, 7 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 1 reply, has 2 voices.

Last updated by Nigel 2 years, 7 months ago.

Author
Posts
#2366725

Tell us what you are trying to do?
Hi,
I need to make mobile menu to auto - hide in single-page website, when menu item is clicked, or maybe on scroll, when clicking menu item scrolls page to selected anchor.
Using plain basic theme, which is not loading any css or other code, it uses pure Bootstrap, included in Toolset's Layouts. Bootstrap 4 used now, selected in Toolset options.
Here is menu code I get, when inserting menu via Layouts:

<div class="col-md-7">
<nav class="ddl-nav-wrap ddl-navbar ddl-navbar-default ddl-nav-horizontal pull-right">
<button type="button" class="ddl-navbar-toggle navbar-toggle" data-toggle="collapse" data-target=".ddl-navbar-collapse-9448fa5989dd065da7e11c40202b2aaa" aria-expanded="true">
<span class="ddl-icon-bar icon-bar"></span>
<span class="ddl-icon-bar icon-bar"></span>
<span class="ddl-icon-bar icon-bar"></span>
</button>
<div class="ddl-navbar-collapse ddl-navbar-collapse-9448fa5989dd065da7e11c40202b2aaa collapse show" style=""></div>
</nav>
<ul id="menu-pagrindinis" class="ddl-nav ddl-navbar-nav ddl-nav-horizontal">
<li id="menu-item-135" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-135">Portfolio
<li id="menu-item-136" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-136">Apie
<li id="menu-item-137" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-137">Paslaugos
<li id="menu-item-138" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-138">Klientai
<li id="menu-item-139" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-139">Atsiliepimai
<li id="menu-item-140" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-140">Kontaktai

</div>

Is there any documentation that you are following?

I have tried numerous Bootstrap tutorials, red many topics in Types support, tried various js solutions like this, trying to change class names from Toolset's Bootrstrap code, but did not find any working solution.

$('.navbar a.navbar-link').click(function() {
var navbar_toggle = $('.navbar-toggle');
if (navbar_toggle.is(':visible')) {
navbar_toggle.trigger('click');
}
});

Maybe you could help me with this? Website is almost done and I am stuck on this...

Is there a similar example that we can see?
hidden link

What is the link to your site?
hidden link
Website still under construction, I can provide login credentials, if needed.

Thank you.

#2366781

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Hi there

I was able to get this working whereby when someone clicks on one of the menu links (to lower down the same page) the mobile menu closes.

I added the following JavaScript:

(function ($) {
    $(document).ready(function () {

        const container = $("nav.ddl-nav-wrap");

        container.click(function (e) {

            let button = $("button.ddl-navbar-toggle");

            if ( e.target.type == "button" ) {
                return;
            } else if ( !button.hasClass("collapsed") ) {
                button.click();
            }
        });

    });
})(jQuery);

Please try the same on your own site.

The topic ‘[Closed] Need to make included Bootstrap 4 mobile menu auto – hide on clink or scroll’ is closed to new replies.