0

i have trouble making the navbar on mobile devices collapse with my website. The problem only concerns the mobile version of the website.

When I click on a menu button, the site scrolls to the correct point, but the navbar remains opened, which is annoying. I tried to give the UL LI elements the same class like the "back" button in the navbar, which can collapse the navbar, but this does not work :/.. Could anyone show me how I can make the navigation bar close whenever a menu item is clicked?

This is the website:

Thanks a lot

dinosaur
  • 86
  • 10
  • https://stackoverflow.com/questions/21203111/bootstrap-3-collapsed-menu-doesnt-close-on-click?rq=1 – MoFarid Dec 22 '17 at 00:33
  • Tried the solution with: data-toggle="collapse" data-target=".navbar-collapse" .. the sidebar now collapses, but it does not open anymore when i click the menu button :/ – dinosaur Dec 22 '17 at 00:51
  • it actually even behaves more weird than just not opening .. so this doesnt solve my problem completely – dinosaur Dec 22 '17 at 00:55
  • Possible duplicate of [Bootstrap 3 collapsed menu doesn't close on click](https://stackoverflow.com/questions/21203111/bootstrap-3-collapsed-menu-doesnt-close-on-click) – Calvin Ananda Dec 22 '17 at 01:25

2 Answers2

1

You could solve it with jQuery, by just triggering the action of clicking the menu icon, like this:

jQuery('.rd-navbar-nav li').click(function() {
  jQuery('.rd-navbar-toggle').trigger('click');
});

This way, when you click an element in the menu, it emulates clicking the hamburger menu icon too.

Mando
  • 125
  • 14
0

You can use Jquery if you'd like, but I just use JavaScript on my sites. You can take a look on how to make a collapsible navbar menu with JavaScript here. If you want to close the menu bar whenever a menu item is clicked, just set a close() function in the onClick() attributes if the menu is active and open. The close() function will be the function in which you hide the menu once again.

EDIT: You must define the close() function with in your JavaScript and set it to hide the menu items though.

Jared Scarito
  • 89
  • 10