Mobile menu (bootstrap 4)

JavaScript
1

Has anyone seen a simple solution for bootstrap 4 on the responsive menu not closing down when using anchor links?

I’ve read a few posts and tried a few inline scripts but nothing seems to work.

Site is currently hosted as beta.gardenroomproductions.co.uk

<div class="responsive-mobile-menu">
            <a href="#" title="" class="close-menu"><i class="ion-close"></i></a>
            <ul>
                <li><a class="active" href="#home" title="Home">Home</a></li>
                <li><a href="#about-us" title="">About</a></li>
                <li><a href="#works" title="">Works</a></li>
                <li><a href="#contact" title="">Contact</a></li>
            </ul>
        </div>

JS is standard bootstrap 4 script.

2

That looks like a custom nav script as it does not use the bootstrap4 collapse and toggle routines.

Looking at the JS you could remove the active class when the anchor is clicked. Try something like this.

$(document).ready(function () {
  $(".responsive-mobile-menu a").click(function (event) {
    $(".responsive-mobile-menu").removeClass("active");
     $(".mobile-menu-btn").removeClass("active");
  });
});

I notice in your page you add an active button class to the hamburger menu but you never utilise it or remove it either. (Aside: I’m not keen on the duplicated menu for mobile as usually you can do that effect with the same menu as you have at the top.)

2 Likes
3

Not to be a nitpicker, but we need to remove the . in the .removeClass. So…

$(".responsive-mobile-menu").removeClass("active");
     $(".mobile-menu-btn").removeClass("active");
2 Likes
4

Whoops :slight_smile: well spotted.

Changed now :wink:

2 Likes
5

Ahh yes removing the active class so simple… sorry was overthinking this.
Perfect thanks for this.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.