Jasny bootstrap: Mobile View

Question

I 'm using Jasny bootstrap to create a left hand navigation menu and I came across an issue.

So, for mobile screens you get something like the above. How are you supposed to close the menu? This is from his own examples at his website

Thanks!

Answer 1

Change the following style in the jasny-bootstrap.css file to desired width.

.navmenu, .navbar-offcanvas {width: 300px;}

e.g., 200px, which looks good in smaller screens like iphone 4.

Answer 2

You´re closing the menu by clicking on the active item in the list. In that case it´s the "Reveal"-item

Answer 3

I don't think there is a solution to my problem :P. The best you can do is create an "X" icon at the upper right corner of the menu or something, and attach the same click handler that jasny uses to open/close the menu.

Anyway, I think that this bootstrap left-hand-nav plugin does the same with much less code than jasny. I strongly suggest anyone reading this to give it a try :)

Cheers!

Answer 4

You may use something like that

$('.navmenu, .navbar-offcanvas').css({
  "width": (viewport - 50) + "px"
});

and you get fixed indent on all devices, see that answer