CODEWITHSUNDEEP
javascripthtmlcssnavigationnavbar
dinosaur
dinosaur

Reputation: 86

Make navbar collapse/close on click

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

Upvotes: 0

Views: 1941

Answers (2)

Jared Scarito
Jared Scarito

Reputation: 99

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.

Upvotes: 0

Mando
Mando

Reputation: 145

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.

Upvotes: 1

Related Questions