javascript - how to make bootstrap off canvas nav overlap content instead of move it

Question

I like the off canvas feature that bootstrap 3 has: http://getbootstrap.com/examples/offcanvas/. However, for one of my projects i'd like it to overlap the content rather than move the content to the side. Is this possible? If so how?

Here's what i mean by overlapping:

Answer 1

update (based on your comment and new sketch)

See: http://bootply.com/78559

html:

<div class="container">

<div class="row">
    <div class="col-sm-9" style="background-color:lightgreen;height:500px;">
        Content

        <button id="navigator">Show Nav</button>
    </div>
    <div class="sidenav col-sm-3" style="background-color:red;height:100px;">Nav</div>
</div>


  <hr>

  <footer>
    <p>&copy; Company 2013</p>
  </footer>

</div><!--/.container-->

css:

@media (max-width: 767px) 
{ 

    .sidenav
    {
        position: absolute;
        top: 50px;
        height: 0px;
        width: 0px;
        overflow: hidden;
        left:100%; 
        padding:0;
    }

    .sidenav.on
    {    

        width:50%;
        left:50%;
        -webkit-transition: all 2s ease 0s;
        -moz-transition: all 2s ease 0s;
        -o-transition: all 2s ease 0s;
        transition: all 2s ease 0s;

    }   

}

javascript:

 $('#navigator').click(function(){$('div.sidenav').toggleClass('on');});

--

Yes, see: http://bootply.com/77207

The off canvas feature is not a default feature of bootstrap. This demo shows what you can do with Bootstrap, css, mediaqueries and javascript (jQuery).

1) media queries hide the sidebar when the screen width is below 768px (css a negative right position) 2) clicking the button adds the class .active to the content (including the sidebar) 3) css sets the position of the content with class .active to the left with ... % (positive right position) the content hide (outside the viewport) and the navbar become visible. 4) the effect of show / hide is done with CSS3 transitions http://www.w3schools.com/css3/css3_transitions.asp

In the original example the content swift 50%, change this to 100% (or a little more) will give the effect of overlap.

Maybe also see: Toggle sidebar on mobile device with Twitter Bootstrap 2.x (easy to migrate to TB3)