SuperFish Bootstrap menu collapsed (mobile) integration

Created on 30 June 2017, almost 8 years ago
Updated 3 May 2023, about 2 years ago

Here is a small solution to have the superfish menu already open when you click on the Bootstrap navbar toggle button, no hack.
it uses Bootstrap 3 js events ( 'show.bs.collapse' fires immediately when the show instance method is called), check if we have not yet open the menu, simulate a click on the superfish toggle menu link and hides it.

In the attach function of your theme, just add:

$('#navbar-collapse').on('show.bs.collapse', function() {
                if (!$('#superfish-main-accordion').hasClass("sf-expanded")) {
                    $('#superfish-main-toggle').click().hide();
                }
});

I don't really know where I could put this usefull piece of code, here seemed the best place.

Feature request
Status

Needs work

Version

1.0

Component

Code

Created by

🇨🇦Canada guile2912

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇳🇬Nigeria chike Nigeria

    #15 works on Barrio Bootstrap 5 theme.

    Thanks.

  • ivnish Kazakhstan

    New version of bootstrap theme doesn't use jQuery. My version of code for using bootstrap toggler for toggling superfish accordion

    document.querySelector('button.navbar-toggler')?.addEventListener('click', () => {
      ['superfish-main-toggle', 'superfish-top-menu-toggle'].forEach(id => {
        document.getElementById(id)?.click();
      });
    });
    
Production build 0.71.5 2024