Mobile view menu not collapsing on second click - Now UI Bootstrap Kit

[walkdeline]

I'm building a website using the Now UI Bootstrap theme but the menu on mobile view is only collapsing the first time I click on a link. Is there a way to fix this? What is likely to be causing the problem?

The website is sitting on http://dev06.walkdelinewebdesign.com/index.html

If it isn't an easy fix then how do I revert back to the standard bootstrap menu that expands downwards on click?

[dragosct]

Hi, @walkdeline! Thank you for using our products. Please, next time when you have an issue related to a product from us open the issue on the GitHub repo of that product, because in this way you can risk to not receive an answer in a short time. Now in regard to your problem please can you be more specific about your issue because I opened your project and it seems that the navbar collapse on the mobile view it's working fine?

Thank you for your understanding!

Regards, Dragos

[walkdeline]

When I click on the toggle button for the mobile menu and then click on a menu link the menu will only automatically close on the first time and not afterwards.

The menu items link to sections on the index.html page.

Thanks for your assistance!

[dragosct]

Hi! What you want is that the navbar menu to be opened all the time. To achieve this you must put in the ready function the following code and put on thebody tag in the page that you want to be opened always the class .nav-open:

if($('body').hasClass('nav-open')) {
      mobile_menu_visible = 1;
}

Regards, Dragos

[walkdeline]

Thanks for that response but the problem is that the menu doesn't always automatically close when you click on a link in it on mobile view. I can click on a link and although the site navigates to that link the menu doesn't close and I need to close it manually. To see what I mean you can try clicking on links in the mobile menu using Chrome simulator or on your phone.

[dragosct]

Hi, @walkdeline! Please, can you send us a video to show us and in this way we will understand better your problem?

Regards, Dragos

[walkdeline]

Please find video of the problem attached NowUIBootstrap-theme-mobile-menu-problem.zip

[dragosct]

Hi! Please go to assets/js/now-ui-kit.js and find this function:

$(document).on('click', '.navbar-toggler', function() {
    $toggle = $(this);

    if (nowuiKit.misc.navbar_menu_visible == 1) {
        $('html').removeClass('nav-open');
        nowuiKit.misc.navbar_menu_visible = 0;
        $('#bodyClick').remove();
        setTimeout(function() {
            $toggle.removeClass('toggled');
        }, 550);
    } else {
        setTimeout(function() {
            $toggle.addClass('toggled');
        }, 580);
        div = '<div id="bodyClick"></div>';
        $(div).appendTo('body').click(function() {
            $('html').removeClass('nav-open');
            nowuiKit.misc.navbar_menu_visible = 0;
            setTimeout(function() {
                $toggle.removeClass('toggled');
                $('#bodyClick').remove();
            }, 550);
        });

        $('html').addClass('nav-open');
        nowuiKit.misc.navbar_menu_visible = 1;
    }
});

Here you have to add near the selector .navbar-toggler your selector and replace $toggle variable with .navbar-toggler like in the below example:

Regards, Dragos

[walkdeline]

Thanks for that solution - all fixed now!