Close off-canvas sidebar on link click in Jasny Bootstrap

[nolaandy]

I'm developing a site http://maypoprestaurant.com/location

On mobile ( < 768px ), after collpasing the off-canvas navigation via the hamburger icon, I need the off-canvas navigation to close up once one of its links is clicked. As it is now, a mobile user must click the hamburger >nav link > then click off the sidebar in order to send it back offcanvas.

Any help would be GREATLY appreciated as I'm pulling my hair out over here. :x

// Navigation Code    
  <div id="navA" class="navmenu navmenu-default navmenu-fixed-left offcanvas-xs">
  <a class="navmenu-brand visible-sm visible-md visible-lg" href="#"><img src="<?php echo get_stylesheet_directory_uri(); ?>/img/maypop-logo.png" class="logoSidebar"></a>
   <ul class="nav navmenu-nav">
    <li><a data-toggle="offcanvas" data-target=".navmenu" href="/home2" class="<?php if (is_page('home2')) echo 'active'; ?>">
    <i class="fa fa-home" aria-hidden="true"></i> Home</a></li>

    <li><a data-toggle="offcanvas" data-target=".navmenu" href="/menus" class="<?php if (is_page('menus')) echo 'active'; ?>">
    <i class="fa fa-plus" aria-hidden="true"></i> Menus</a></li>

    <li><a data-toggle="offcanvas" data-target=".navmenu" href="/location" class="<?php if (is_page('location')) echo 'active'; ?>">
    <i class="fa fa-map-marker" aria-hidden="true"></i> Location</a></li>

    <li><a data-toggle="offcanvas" data-target=".navmenu" href="/press" class="<?php if (is_page('press')) echo 'active'; ?>">
    <i class="fa fa-newspaper-o" aria-hidden="true"></i> Press</a></li>

    <li><a data-toggle="offcanvas" data-target=".navmenu" href="/events" class="<?php if (is_page('events')) echo 'active'; ?>">
    <i class="fa fa-calendar-o" aria-hidden="true"></i> Events</a></li> 
  </ul>
</div>

I've added this Javascript in the header:

<script type="text/javascript">
jQuery("#navA .navmenu-nav a").click(function(){
jQuery('.navmenu').offcanvas('hide');
});
</script>

[Minstel]

@nolaandy

I copied your code and tested it. Strange, but menu was closing when clicking on links, although still worked not entirely correctly.

Code data-toggle="offcanvas" data-target=".navmenu", that you've added for each link in menu, closes menu, but prevents link from applying. I removed this code, so that each link looked like this: <a href="/events" class="<?php if @(is_page('events')) echo 'active'; ?>">. Then links work ok, and menu is closing correctly by the JS code you've added for this:

jQuery("#navA .navmenu-nav a").click(function(){
    jQuery('.navmenu').offcanvas('hide');
});

Here is a jsfiddle

[Minstel]

Closing, as solution of problem was just to remove code data-toggle="offcanvas" data-target=".navmenu" from menu links