Close off-canvas nav when menu item clicked

Question

http://darrenbachan.com/playground/diamond-hand-car-wash/index.html

A few things I'm trying to accomplish here:

1. When you click anywhere except the menu item it closes the nav
2. When you click on a menu item it closes the nav and animates to an ID

The off-canvas nav appears only in it's mobile view. If you view the site on your desktop the nav does animate you to a specific ID, so I have some js there that I'm guessing could be used for the off-canvas one. I've read a few articles saying to use data-toggle but I couldn't get that to work.

Answer 1

So I figured I would chime in on this and offer a couple of solutions. If you are just trying to close the menu that you have in place currently when someone clicks on a link in your menu you could very simply either just use a click function to click menu button that you have there like so:

$('.navbar-collapse li a').on('click', function(){
  $('input.checkbox-toggle').click();
});

Or you could probably just remove the checked from the checkbox like so:

$('.navbar-collapse li a').on('click', function(){
  $('input.checkbox-toggle').prop('checked', false);
});

You may want to add an if statement so it only happens at mobile screen sizes so something like the following:

$('.navbar-collapse li a').on('click', function(){
  if($(window).width() <= 767){
    $('input.checkbox-toggle').prop('checked', false);
  }
});

Or vice versa with the click function toggling the click above as well.

And then you could use your scrolling script that you already have in place and everything should work as you want it to.

Or

I see that on your site you are already using bootstrap. Bootstrap has a plugin built in that is called scrollspy that handles one page designs allowing you to scroll to sections and things of that nature. Using this instead of the script that you have in place may be a little more minimal and will serve you better because it will handle replacing active classes in your navbar as well. It may be much better for what you are trying to achieve with your site.

Also At the bottom I have placed a link to a jsfiddle demo that uses scrollspy along with an off canvas menu that is essentially the same thing that you are using in your site above except you can just use one menu for both large and mobile screens instead of placing two menus on your site. Look over this fiddle demo it has scrollspy in place and like I said instead of using two menus it just restyles the off canvas menu at mobile screens and uses jquery to toggle a class to the body of .menu-open when the menu button is pressed.

I wasn't quite sure if you wanted the same kind of overlay style of menu so I made it similar to the site that you have linked to above but if you want it to be a different type of off canvas style then you can just change the css to toggle it from the left or right or wherever.

Here is a link to the fiddle JSFiddle Demo

Anyway Hope this all helps and if you have any questions feel free to comment below.

PS I noticed when looking at your page source that you have .container-fluid wrapping .containers throughout your page. This is not really necessary at all and is more than likely causing the horizontal scrollbar at the bottom. I'm not for sure but I just figured I would point this out to you.