0

I'm using iron-router and twbs:bootstrap in a Meteor project. I'm using a bootstrap navbar but whenever I navigate to a new route while the navbar is expanded, the navbar remains expanded when I get to the new route.

I've tried the solution suggested here: Bootstrap navbar stays expanded on route change but it's not working for me. However, I am not sure that I am implementing it correctly.

In my router.js file I added the following:

var closeNavBar = function() {
  var isExpanded = $('.navbar-toggle').attr('aria-expanded') === true;
  if(isExpanded) {
    $('.navbar-toggle').click();
  }
}

Router.onAfterAction(closeNavBar, {except: 'signup'});

What am I missing?

Edit: I tried to add a comment to the referenced question but I don't have enough reputation points to add comments.

Community
  • 1
  • 1
esteban3643345
  • 29
  • 4

1 Answers1

0

Instead of adding the code to the router, I created an event listener in the template handler file.

'click a.toggle-navbar': function(e) {
  // is the menu visible
  if($('#bs-example-navbar-collapse-1').is(':visible')) {
    // click the toggle button
    $('.navbar-toggle:visible').click();
  }
}

Be sure to add the 'toggle-navbar' class to each link in your dropdown menu, and make sure that you change 'bs-example-navbar-collapse-1' to fit the id of the navbar-collapse div.

Note that my solution is a modified version of the one found here: https://forums.meteor.com/t/bootstrap-dropdown-does-not-close-on-click-navigation/25098

esteban3643345
  • 29
  • 4