Hide Jasny OffCanvas Navigation

Question

I am trying to use Jasny for some Off-Canvas menu component.

I am also using Twitter-Bootstrap to open a modal window when a link is clicked on the off-canvas menu.

The issue I have is that the off-canvas menu (on mobile view) is pushing the bootstrap modal off to the right, hence, I am unable to see all the elements in the modal window.

Is there a way to hide the Off-Canvas menu when a link (or button) has been clicked/selected on the navigation bar?

Some HTML code snippets:

<div class="navbar navbar-fixed-top navbar-default">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navbar-offcanvas" data-canvas="body">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

        <a class="navbar-brand pull-right" href="#">
            <img class="img-responsive" src="assets/img/logo.png" alt="Alternate Text for Image" >
        </a>
    </div>

    <div class="navbar-offcanvas offcanvas navmenu-fixed-left">
        <a class="navmenu-brand" href="#">My Application</a>
        <ul class="nav nav-justified">
            <li>
                <a href="#"><span class="fa fa-search fa-lg"></span></a>
            </li>
            <li><a href="#" data-toggle="modal" data-target="#modalSignup" data-backdrop="static" >Sign Up</a></li>
            <li><a href="#" data-toggle="modal" data-target="#modalLogin" data-backdrop="static">Sign In</a></li>
        </ul>
    </div>
</div>

And the modal HTML:

<div class="modal fade" id="modalLogin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Login or <a href="#" data-toggle="modal" data-target="#modalSignup" data-backdrop="static" data-dismiss="modal">Sign Up</a></h4>
            </div>

            <div class="modal-body">
                <form class="form-signin">
                    <label for="inputUserName" class="sr-only">Username</label>
                    <input type="email" id="inputUserName" class="form-control" placeholder="Username" required autofocus>
                    <label for="inputPassword" class="sr-only">Password</label>
                    <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
                </form>
            </div>

            <div class="modal-footer">
                <label>
                    <input type="checkbox" value="remember-me"> Remember me
                </label>
                <button type="button" class="btn btn-primary">Sign In</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

Answer 1

Just looking at the Jasny documentation There are a few options:

Set the autohide option when you're creating the offcanvas

Something like:

$('.navmenu').offcanvas({ autohide: true });

Manually trigger the hide event for the offcanvas

You could set a click event for buttons / links in the navbar and manually trigger the offcanvas close method in your handler.

Something like:

$(".navbar button").click(function(){
    // Close offcanvas nav
    // offcanvas_selector is any valid css selector to get your offcanvas element
    $(offcanvas_selector)..offcanvas('hide');
    ....
});

Hope that helps!