0

Have managed to get the Jasny Bootstrap off canvas component to work. It has a few different responsive settings, though defaults into the 'push' option: (http://jasny.github.io/bootstrap/examples/navmenu-push/).

I'd like to enable the 'reveal' option instead and have been using the following snippet of code (directly from the Jasny BS site) as an example:

<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left" role="navigation">
  <div id="targetDiv">
    Content
  </div>
</nav>
<div class="navbar navbar-default navbar-fixed-top">
  <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="#targetDiv">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
</div>

As the instructions state on the 'reveal' page (http://jasny.github.io/bootstrap/examples/navmenu-reveal/), I have:

1) Wrapped the content in a div (targetDiv above), and then set the canvas option (which I believe is data-canvas) to equal that div; i.e. data-canvas="#targetDiv".

2) Removed the offcanvas class from the myNavmenu nav and set its z-indez to 0 via less.

What I get does not behave like the example: http://jasny.github.io/bootstrap/examples/navmenu-reveal. What am I doing incorrectly?

Arnold Daniels
  • 16,516
  • 4
  • 53
  • 82
Vercingetorix
  • 253
  • 2
  • 12
  • I don't understand what you want to hide. The `data-target="#myNavmenu"` is the part that will be hidden. `data-canvas="#targetDiv"` is the part that will never be hidden. You should take a look at the file `navmenu-reveal.css` on Jasny example for the CSS you need to set. – e666 Oct 05 '14 at 10:41
  • @e666: I'd like for the `#myNavmenu` to be hidden (as opposed to it being `offcanvas`) underneath the rest of the body. Then, when the user clicks the button, the body should slide off the top of `#myNavmenu` (as opposed to letting it be displaced or 'pushed' by `#myNavmenu`). The push functionality works fine, I just can't get the 'reveal' to work. I believe I've followed the instructions as described in: http://jasny.github.io/bootstrap/examples/navmenu-reveal to work, but clearly I must be doing something wrong. – Vercingetorix Oct 05 '14 at 20:21
  • @Jasny-Arnold-Daniels: Finally got this to work. As you can probably tell I'm a bit new with Jasny / Bootstrap. Would recommend that you can make your instructions more explicit on: http://jasny.github.io/bootstrap/examples/navmenu-reveal. Instead of saying 'You get the reveal effect by wrapping the content in a div and setting the canvas option to target that div,' you could specify which content. I thought it was the content in `#myNavmenu`, but it turned out to be all of the html within this div: `
    `. Thank you!
     – Vercingetorix Oct 05 '14 at 20:32

1 Answers1

1

For users attempting to create a 'reveal' effect in lieu of the 'push' effect, follow the instructions on: http://jasny.github.io/bootstrap/examples/navmenu-reveal. I'd like to clarify that the 'content' to which the instructions refer is any content that's on the canvas. In my above example the canvas only contained the navbar, i.e. <div class="navbar navbar-default navbar-fixed-top">. Wrap your new, named div around this content while making the other changes and it works perfectly.

Vercingetorix
  • 253
  • 2
  • 12