1

I am trying to use Bootstrap off canavas left side bar to toggle on small devices.

here is the bootply code example:

www.bootply.com/C2wQEkdSAn

The problem when displaying on mobile when you click on the accordion the contents are not pushing the footer down but hides behind it.

enter image description here

Here is the full code:

<!doctype html> <html lang="en">  <head>

  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<style> /*a  * Style tweaks  *
--------------------------------------------------  */ body {   padding-top: 70px; } footer {   padding-left: 15px;   padding-right: 15px; }

/*  * Off Canvas  * --------------------------------------------------
*/ @media screen and (max-width: 768px) {   .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;   }

  .row-offcanvas-left   .sidebar-offcanvas {
    left: -50%;   }

  .row-offcanvas-left.active {
    left: 50%;   }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 50%;
    margin-left: 12px;   } } </style>

 </head>  <body>    <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">   <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!-- /.nav-collapse -->   </div><!-- /.container --> </div><!-- /.navbar -->

<div class="container">

  <div class="row row-offcanvas row-offcanvas-left">

     <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">

       <p class="visible-xs">
        <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas"><i class="glyphicon glyphicon-chevron-left"></i></button>
      </p>

      <div class="well sidebar-nav">
        <ul class="nav">
          <li>Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li>Sidebar</li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li>Sidebar</li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>

        <div class="accordion" id="accordion2">
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                        Collapsible Group Item #1
                    </a>
                </div>
                <div id="collapseOne" class="accordion-body collapse">
                    <div class="accordion-inner">
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                    </div>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                        Collapsible Group Item #2
                    </a>
                </div>
                <div id="collapseTwo" class="accordion-body collapse">
                    <div class="accordion-inner">
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                    </div>
                </div>
            </div>
        </div>


      </div><!--/.well -->
    </div><!--/span-->

    <div class="col-xs-12 col-sm-9">
      <p class="pull-left visible-xs">
        <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle Nav</button>
      </p>
      <div class="jumbotron">
        <h1>Hello, world!</h1>
        <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
      </div>
      <div class="row">
        <div class="col-6 col-sm-6 col-lg-4">
          <h2>Heading</h2>
          <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML, CSS and Javascript.</p>
          <p><a class="btn btn-default" href="#">View details »</a></p>
        </div><!--/span-->
        <div class="col-6 col-sm-6 col-lg-4">
          <h2>Heading</h2>
          <p>Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML, CSS and Javascript. Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. </p>
          <p><a class="btn btn-default" href="#">View details »</a></p>
        </div><!--/span-->
        <div class="col-6 col-sm-6 col-lg-4">
          <h2>Heading</h2>
          <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML, CSS and Javascript.</p>
          <p><a class="btn btn-default" href="#">View details »</a></p>
        </div><!--/span-->
        <div class="col-6 col-sm-6 col-lg-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#">View details »</a></p>
        </div><!--/span-->
        <div class="col-6 col-sm-6 col-lg-4">
          <h2>Heading</h2>
          <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML, CSS and Javascript.</p>
          <p><a class="btn btn-default" href="#">View details »</a></p>
        </div><!--/span-->
        <div class="col-6 col-sm-6 col-lg-4">
          <h2>Heading</h2>
          <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML, CSS and Javascript.</p>
          <p><a class="btn btn-default" href="#">View details »</a></p>
        </div><!--/span-->
      </div><!--/row-->
    </div><!--/span-->

       </div><!--/row-->

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

<div class="">
    <nav class="navbar navbar-inverse navbar-sticky-bottom" role="navigation">
        <div class="row-fluid" style="padding-top:1em;">

            <div class="col-md-3 col-sm-6 col-xs-12">
                <ul class="list-unstyled">
                    <li><a href="#"> Home</a></li>
                    <li><a href="#" class="navbar-link"> Ccontact_us</a></li>
                    <li><a href="#" class="navbar-link"> Announcements</a></li>
                    <li><a href="#" class="navbar-link"> About_us</a></li>
                </ul>
            </div>


            <div class="col-md-3 col-sm-6 col-xs-12">

            Text and links

            </div>

             <div class="col-md-3 col-sm-6 col-xs-12">
                <p class="navbar-text">Text and links</p>
            </div>

            <div class="col-md-3 col-sm-6 col-xs-12">
                <p class="navbar-text">copyright</p>
            </div>

        </div><!--row-->    
    </nav> </div>

<script> $(document).ready(function() {
    $('[data-toggle=offcanvas]').click(function() {
        $('.row-offcanvas').toggleClass('active');
    }); }); </script>

 </body> </html>

I think the problem with this css :

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 50%;
    margin-left: 12px;
  }

I found this suggestion but did not solve the issue:

$(document).ready(function() {
    $('[data-toggle=offcanvas]').click(function() {
        $('.row-offcanvas').hasClass( "active" ) ? $('.sidebar-offcanvas').css("position","absolute") : $('.sidebar-offcanvas').css("position","relative");  
        $('.row-offcanvas').toggleClass('active');
    }); 
});
daliaessam
  • 1,636
  • 2
  • 21
  • 43
  • I found this question also but did not solve the issue http://stackoverflow.com/questions/24579948/bootstrap-off-canvas-if-content-less-than-sidebar-messed-up-scrolling/26160507#26160507 – daliaessam Jan 08 '15 at 19:16

4 Answers4

1

Her's a complete page:

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<meta content="" name="author">
<link href="../../docs-assets/ico/favicon.png" rel="shortcut icon">

<title>Starter Template for Bootstrap</title><!-- Bootstrap core CSS -->
<link href=
"http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel=
"stylesheet">
<link href=
"http://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css"
rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

<style>
            body {
                    padding-top: 50px;
                }
                .content_wrap {
                    padding: 40px 15px;
                    text-align: center;
                }
                footer {
                    background-color: #222;
                    color: #777;
                }
                /*  * Off Canvas  * --------------------------------------------------
                */ @media screen and (max-width: 768px) {
                            .row-offcanvas {
                            }
                            #sidebar {
                                display:none;
                            }
                            #sidebar.in {
                                display:block;
                                position: fixed;
                                z-index: 1030;
                                top: 0px;
                                bottom: 0px;
                                overflow-y: auto;
                                border-radius: 0px;
                                padding:0px;
                                min-height:100%;
                                width:300px;
                            }
                            #sidebar.in .well {
                                margin:0px;
                                border-radius: 0px;
                                border:none;
                                min-height:100%;
                            }
                }
    </style>
 </head>

<body>
 <div class="navmenu navmenu-default navmenu-fixed-left offcanvas">
    <a class="navmenu-brand" href="#">Project name</a>

    <ul class="nav navmenu-nav">
        <li>
            <a href="../navmenu/">Slide in</a>
        </li>

        <li class="active">
            <a href="./">Push</a>
        </li>

        <li>
            <a href="../navmenu-reveal/">Reveal</a>
        </li>

        <li>
            <a href="../navbar-offcanvas/">Off canvas navbar</a>
        </li>
    </ul>

    <ul class="nav navmenu-nav">
        <li>
            <a href="#">Link</a>
        </li>

        <li>
            <a href="#">Link</a>
        </li>

        <li>
            <a href="#">Link</a>
        </li>

        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href=
            "#">Dropdown <b class="caret"></b></a>

            <ul class="dropdown-menu navmenu-nav">
                <li>
                    <a href="#">Action</a>
                </li>

                <li>
                    <a href="#">Another action</a>
                </li>

                <li>
                    <a href="#">Something else here</a>
                </li>

                <li class="divider"></li>

                <li class="dropdown-header">Nav header</li>

                <li>
                    <a href="#">Separated link</a>
                </li>

                <li>
                    <a href="#">One more separated link</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" data-target=".navbar-collapse"
            data-toggle="collapse" type="button"><span class=
            "icon-bar"></span> <span class="icon-bar"></span> <span class=
            "icon-bar"></span></button> <a class="navbar-brand" href=
            "#">Project name</a>
        </div>

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#">Home</a>
                </li>

                <li>
                    <a href="#about">About</a>
                </li>

                <li>
                    <a href="#contact">Contact</a>
                </li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>

<div class="container content_wrap">
    <div class="row">
        <div class="col-xs-6 col-sm-3" id="sidebar">
            <div class="well sidebar-nav">
                <ul class="nav">
                    <li>Sidebar</li>

                    <li class="active">
                        <a href="#">Link</a>
                    </li>

                    <li>
                        <a href="#">Link</a>
                    </li>

                    <li>
                        <a href="#">Link</a>
                    </li>

                    <li>
                        <a href="#">Link</a>
                    </li>

                    <li>Sidebar</li>

                    <li>
                        <a href="#">Link</a>
                    </li>

                    <li>
                        <a href="#">Link</a>
                    </li>

                    <li>
                        <a href="#">Link</a>
                    </li>

                    <li>
                        <a href="#">Link</a>
                    </li>

                    <li>Sidebar</li>

                    <li>
                        <a href="#">Link</a>
                    </li>

                    <li>
                        <a href="#">Link</a>
                    </li>

                    <li>
                        <a href="#">Link</a>
                    </li>
                </ul>

                <div class="accordion" id="accordion2">
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a class="accordion-toggle" data-parent=
                            "#accordion2" data-toggle="collapse" href=
                            "#collapseOne">Collapsible Group Item #1</a>
                        </div>

                        <div class="accordion-body collapse" id=
                        "collapseOne">
                            <div class="accordion-inner">
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                            </div>
                        </div>
                    </div>

                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a class="accordion-toggle" data-parent=
                            "#accordion2" data-toggle="collapse" href=
                            "#collapseTwo">Collapsible Group Item #2</a>
                        </div>

                        <div class="accordion-body collapse" id=
                        "collapseTwo">
                            <div class="accordion-inner">
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                                Sidebar text...<br>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!--/.well -->
        </div><!--/span-->

        <div class="col-xs-12 col-sm-9" id="main">
            <p class="pull-left visible-xs"><button class=
            "btn btn-primary btn-xs glyphicon glyphicon-chevron-left"
            data-canvas="body" data-target="#sidebar" data-toggle=
            "offcanvas" style="font-style: italic" type=
            "button"></button></p>

            <div class="jumbotron">
                <h1>Hello, world!</h1>

                <p>This is an example to show the potential of an offcanvas
                layout pattern in Bootstrap. Try some responsive-range
                viewport sizes to see it in action.</p>
            </div>

            <div class="row">
                <div class="col-lg-4">
                    <h2>Heading</h2>

                    <p>Bootstrap is a front-end framework that uses CSS and
                    JavaScript to facilitate responsive Web design. Bootply
                    is a playground for Bootstrap that enables developers
                    and designers to test, prototype and create mockups
                    using Bootstrap friendly HTML, CSS and Javascript.</p>

                    <p><a class="btn btn-default" href="#">View details
                    »</a></p>
                </div>

                <div class="col-lg-4">
                    <h2>Heading</h2>

                    <p>Bootply is a playground for Bootstrap that enables
                    developers and designers to test, prototype and create
                    mockups using Bootstrap friendly HTML, CSS and
                    Javascript. Bootstrap is a front-end framework that
                    uses CSS and JavaScript to facilitate responsive Web
                    design.</p>

                    <p><a class="btn btn-default" href="#">View details
                    »</a></p>
                </div>

                <div class="col-lg-4">
                    <h2>Heading</h2>

                    <p>Bootstrap is a front-end framework that uses CSS and
                    JavaScript to facilitate responsive Web design. Bootply
                    is a playground for Bootstrap that enables developers
                    and designers to test, prototype and create mockups
                    using Bootstrap friendly HTML, CSS and Javascript.</p>

                    <p><a class="btn btn-default" href="#">View details
                    »</a></p>
                </div>
            </div><!--/row-->

            <div class="row">
                <div class="col-lg-4">
                    <h2>Heading</h2>

                    <p>Bootstrap is a front-end framework that uses CSS and
                    JavaScript to facilitate responsive Web design. Bootply
                    is a playground for Bootstrap that enables developers
                    and designers to test, prototype and create mockups
                    using Bootstrap friendly HTML, CSS and Javascript.</p>

                    <p><a class="btn btn-default" href="#">View details
                    »</a></p>
                </div>

                <div class="col-lg-4">
                    <h2>Heading</h2>

                    <p>Bootply is a playground for Bootstrap that enables
                    developers and designers to test, prototype and create
                    mockups using Bootstrap friendly HTML, CSS and
                    Javascript. Bootstrap is a front-end framework that
                    uses CSS and JavaScript to facilitate responsive Web
                    design.</p>

                    <p><a class="btn btn-default" href="#">View details
                    »</a></p>
                </div>

                <div class="col-lg-4">
                    <h2>Heading</h2>

                    <p>Bootstrap is a front-end framework that uses CSS and
                    JavaScript to facilitate responsive Web design. Bootply
                    is a playground for Bootstrap that enables developers
                    and designers to test, prototype and create mockups
                    using Bootstrap friendly HTML, CSS and Javascript.</p>

                    <p><a class="btn btn-default" href="#">View details
                    »</a></p>
                </div>
            </div><!--/row-->
        </div>
    </div><!--/row-->
</div>

<footer>
    <div class="container">
        <div class="row-fluid" style="padding-top:1em;">
            <div class="col-md-3 col-sm-6 col-xs-12">
                <ul class="list-unstyled">
                    <li>
                        <a href="#">Home</a>
                    </li>

                    <li>
                        <a class="navbar-link" href="#">Ccontact us</a>
                    </li>

                    <li>
                        <a class="navbar-link" href="#">Announcements</a>
                    </li>

                    <li>
                        <a class="navbar-link" href="#">About us</a>
                    </li>
                </ul>
            </div>

            <div class="col-md-3 col-sm-6 col-xs-12">
                <p class="navbar-text">Text and links</p>
            </div>

            <div class="col-md-3 col-sm-6 col-xs-12">
                <p class="navbar-text">Text and links</p>
            </div>

            <div class="col-md-3 col-sm-6 col-xs-12">
                <p class="navbar-text">copyright</p>
            </div>
        </div>
    </div><!--row-->
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
 <script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> 
 <script src="http://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>
 </body>
</html>

Here's a solution using offcanvas.js from http://jasny.github.io/bootstrap/javascript/#offcanvas

and some custom CSS:

body {
padding-top: 50px;
}
.content_wrap {
padding: 40px 15px;
text-align: center;
}
footer {
background-color: #222;
color: #777;
}
/*  * Off Canvas  * --------------------------------------------------
                */
@media screen and (max-width: 768px) {
  .row-offcanvas {
  }
  #sidebar {
    display:none;
  }
  #sidebar.in {
    display:block;
    position: fixed;
    z-index: 1030;
    top: 0px;
    bottom: 0px;
    overflow-y: auto;
    border-radius: 0px;
    padding:0px;
    min-height:100%;
    width:300px;
   }
   #sidebar.in .well {
    margin:0px;
    border-radius: 0px;
    border:none;
    min-height:100%;
   }
}

you can see full code here

and a full-screen result here

UPDATE - to match your code

/*
* Off Canvas
* --------------------------------------------------
*/
@media screen and (max-width: 768px) {

 .row-offcanvas {
  position: relative;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
 }

 .row-offcanvas-left.sidebar-offcanvas {
  margin-left: -50%;
 }

 .sidebar-offcanvas {
  width: 50%;
 }
}
Darko
  • 920
  • 10
  • 22
  • Not a solution to my problem. My problem not with a full page left side bar, my problem with a row below the top nav where this row have two columns the left one is sidebar on mobile devices, please see the full code in my question. Thanks for your effort. – daliaessam Jan 08 '15 at 21:15
  • Seems you are not getting the problem, please use the the code in question and review the image above to understand that I am talking about a row in the middle of the page that I am hiding the left column and all my problem is this column is not stretching when displayed to push down the rest of the page, I am not talking about the side bar offcanvas, I know about the examples of bootstrap for offcanvas. Your great effort is much appreciated. – daliaessam Jan 08 '15 at 21:34
  • sorry, if I understand correctly, the problem is with the sidebar (on mobile devices) it goes under the header and footer area? – Darko Jan 08 '15 at 21:39
  • Not exactly. It does not go under the header, it is contained within the row which is under the top nav, the problem when you toggle it to display, it should push the footer since its contents taller than the right column, but since this columns is position: absolute the overflow is shown behind/under the footer and If I set its z-index to much higher it shows above the footer. So the sidebar should be limited within the middle row between the top nav and the bottom area. – daliaessam Jan 08 '15 at 21:46
  • if you check the code I sent you you can see that sidebar is pushing entire content including the footer, even when accordion is clicked/expanded, also user can scroll-up and down the sidebar on mobile devices independently of the main content. – Darko Jan 08 '15 at 21:46
  • but if you insist to use this code as it is here you go, change this: .row-offcanvas-left .sidebar-offcanvas { margin-left: -50%; } and remove position absolute from .sidebar-offcanvas – Darko Jan 08 '15 at 21:59
1

I was trying to achieve the same thing you were. Here is how I solved it.

Basically I think the difference is that I change the position of both the .row-offcanvas and .sidebar-offcanvas in the CSS. I set the left and right to 0 on the .sidebar-offcanvas.active

$(document).ready(function() {
 $('[data-toggle=offcanvas]').click(function() {
  $('.row-offcanvas').toggleClass('active');
  $('.sidebar-offcanvas').toggleClass('active');
  return false;
 });
});
/**
 *  Base structure
 */
body {
 overflow-x:hidden;
 padding-top:50px;
}

/**
 *  Top navigation
 */
.navbar-fixed-top {
 border:0;
}
.sidebar-offcanvas {
 background-color:#f5f5f5;
 border-right:1px solid #eee;
 bottom:0;
 display:block;
 left:0;
 position:fixed;
 overflow-x:hidden;
 overflow-y:auto;
 top:50px;
 transition:all .25s ease-in-out;
 width:250px;
 z-index:1000;
}
.main {
 left:250px;
 padding:20px;
 padding-left:40px;
 padding-right:40px;
 position:absolute;
 width:calc(100% - 250px);
}
.main .page-header {
 margin-top:0;
}
@media screen and (max-width: 768px) {
 .main {
  left:0;
  padding:20px;
  position:relative;
  width:100%;
 }
 .row-offcanvas {
  position:relative;
  transition:all .25s ease-in-out;
 }
 .row-offcanvas-right {
  right:0;
 }
 .row-offcanvas-left {
  left:0;
 }
 .row-offcanvas-right .sidebar-offcanvas {
  right:-250px;
 }
 .row-offcanvas-right .sidebar-offcanvas.active {
  right:0;
 }
 .row-offcanvas-left .sidebar-offcanvas {
  left:-250px;
 }
 .row-offcanvas-left .sidebar-offcanvas.active {
  left:0;
 }
 .row-offcanvas-right.active {
  right:250px;
 }
 .row-offcanvas-left.active {
  left:250px;
 }
 .sidebar-offcanvas {
  display:block;
  position:fixed;
  width:250px;
 }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="author" content="dansek">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>Project name</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="/assets/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="/assets/css/font-awesome.min.css" />
<script src="/assets/js/jquery-2.1.3.min.js"></script>
<script src="/assets/js/holder.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="/assets/js/html5shiv.min.js"></script>
<script src="/assets/js/respond.min.js"></script>
<![endif]-->
<link href="/assets/css/light-theme-demo.css" rel="stylesheet" />
<script src="/assets/js/dashboard.js"></script>
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
 <div class="container-fluid">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="#">Project name</a>
  </div>
  <div id="navbar" class="navbar-collapse collapse">
   <ul class="nav navbar-nav navbar-right">
    <li><a href="/dashboard/settings">Settings</a></li>
    <li><a href="/dashboard/profile">Profile</a></li>
    <li><a href="/dashboard/help">Help</a></li>
    <li><a href="/account/signout"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Sign out</a></li>
   </ul>
   <form class="navbar-form navbar-right">
    <input type="text" class="form-control" placeholder="Search...">
   </form>
  </div>
 </div>
</nav>
<div class="container-fluid">
 <div class="row row-offcanvas row-offcanvas-left">
  <div class="sidebar-offcanvas" id="sidebar">
   <ul class="nav">
    <li class="active"><a href="/dashboard"><i class="fa fa-fw fa-tachometer"></i> Dashboard <span class="sr-only">(current)</span></a></li>
    <li><a href="/dashboard/reports"><i class="fa fa-fw fa-file"></i> Reports</a></li>
    <li><a href="/dashboard/analytics"><i class="fa fa-fw fa-pie-chart"></i> Analytics</a></li>
    <li><a href="/dashboard/export"><i class="fa fa-fw fa-floppy-o"></i> Export</a></li>
    <li class="nav-spacer"></li>
    <li><a href="/dashboard/users"><i class="fa fa-fw fa-user"></i> Users</a></li>
    <li><a href="/dashboard/groups"><i class="fa fa-fw fa-users"></i> Groups</a></li>
    <li><a href="/dashboard/permissions"><i class="fa fa-fw fa-unlock-alt"></i> Permissions</a></li>
   </ul>
  </div>
  <div class="main">
   <h2 class="page-header">Header</h2>
   <p><button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button></p>
  </div>
 </div>
</div>
</body>
</html>
dsekelj
  • 11
  • 1
  • width:calc() function has problems with IE anyway. You also used position:absolute; on the main section. Anyway, the Bootstrap developers until now unable to solve the issue I posted. – daliaessam Mar 18 '15 at 00:08
0

After 11 month, I was able to do the Bootstrap off canvas right as it should with simple jquery code. This does work exactly the same as Jasny bootstrap off canvas extension.

For LTR sidebar:

<!doctype html>
<html lang="en">
 <head>
    <title>Test</title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


    <script type="text/javascript">
        $(document).ready(function () {

          jQuery('[data-toggle=offcanvas]').click(function () {

        // add this line to change the position of sidebar
        jQuery('.row-offcanvas').hasClass( "active" ) ? jQuery('.sidebar-offcanvas').css("position","absolute") :        jQuery('.sidebar-offcanvas').css("position","relative");  
        // end modif      

        /*$(".content-div").css({"position":"absolute","top":"0"});*/
        $(".content-div").toggleClass("postion");


        jQuery('.row-offcanvas').toggleClass('active')
        });


        });
    </script>

 </head>
 <body>

<style>

.main-div{
    float:left;
    width:100%;
    overflow:hidden;
}


@media(max-width:767px){

  .row-offcanvas {
    position: relative;
    -webkit-transition: all .25s ease-out;
         -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
  }

  .row-offcanvas-right {
    right: 0;
  }

  .row-offcanvas-left {
    left: 0;
  }

  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -50%; /* 6 columns */
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -50%; /* 6 columns */
  }

  .row-offcanvas-right.active {
    right: 50%; /* 6 columns */
  }

  .row-offcanvas-left.active {
    left: 50%; /* 6 columns */
  }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 50%; /* 6 columns */
  }
  .postion{
    position:relative;
    margin-left:-50%;
}

}

</style>

    <div class="container-fluid">

        <div class="row"><h1>Top section</h1></div>

        <div class="main-div">

            <div class="container">

                <div class="row row-offcanvas row-offcanvas-left">

                    <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
                        <ul>
                            <li class="activez"><a href="#">Home</a></li>
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 2</a></li>
                            <li><a href="#">Link 3</a></li>
                            <li><a href="#">Link 4</a></li>
                            <li><a href="#">Link 5</a></li>
                            <li><a href="#">Link 6</a></li>
                            <li><a href="#">Link 7</a></li>
                            <li><a href="#">Link 8</a></li>
                            <li><a href="#">Link 9</a></li>
                            <li><a href="#">Link 10</a></li>
                            <li><a href="#">Link 11</a></li>
                            <li><a href="#">Link 12</a></li>
                            <li><a href="#">Link 13</a></li>
                            <li><a href="#">Link 14</a></li>
                            <li><a href="#">Link 15</a></li>
                            <li><a href="#">Link 16</a></li>
                            <li><a href="#">Link 17</a></li>
                            <li><a href="#">Link 18</a></li>
                            <li><a href="#">Link 19</a></li>
                            <li><a href="#">Link 20</a></li>
                            <li><a href="#">Link 21</a></li>
                            <li><a href="#">Link 22</a></li>
                            <li><a href="#">Link 23</a></li>
                            <li><a href="#">Link 24</a></li>
                            <li><a href="#">Link 25</a></li>
                            <li><a href="#">Link 26</a></li>
                            <li><a href="#">Link 27</a></li>
                            <li><a href="#">Link 28</a></li>
                            <li><a href="#">Link 29</a></li>
                            <li><a href="#">Link 30</a></li>
                            <li><a href="#">Link 31</a></li>
                            <li><a href="#">Link 32</a></li>
                            <li><a href="#">Link 33</a></li>
                            <li><a href="#">Link 34</a></li>
                            <li><a href="#">Link 35</a></li>
                            <li><a href="#">Link 36</a></li>
                            <li><a href="#">Link 37</a></li>
                            <li><a href="#">Link 38</a></li>
                            <li><a href="#">Link 39</a></li>
                            <li><a href="#">Link 40</a></li>
                            <li><a href="#">Link 41</a></li>
                            <li><a href="#">Link 42</a></li>
                            <li><a href="#">Link 43</a></li>
                          </ul>

                    </div>

                    <div class="col-xs-12 col-sm-9 content-div">
                        <p class="pull-left hide-p visible-xs">
                    <button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
                  </p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in aliquet nisl. Praesent sed leo congue, fringilla eros eu, tempus metus. Nam mollis odio ipsum, non vehicula ipsum accumsan sodales. Morbi varius vitae elit euismod cursus. Donec a dapibus justo, in facilisis nisi. Suspendisse ut turpis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui risus, tincidunt at odio ut, ultrices dignissim ipsum. Cras ultrices erat nec leo luctus varius. Nulla sollicitudin tincidunt nulla, ut porta mauris volutpat vitae. Suspendisse ornare dolor sit amet massa venenatis pulvinar.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in aliquet nisl. Praesent sed leo congue, fringilla eros eu, tempus metus. Nam mollis odio ipsum, non vehicula ipsum accumsan sodales. Morbi varius vitae elit euismod cursus. Donec a dapibus justo, in facilisis nisi. Suspendisse ut turpis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui risus, tincidunt at odio ut, ultrices dignissim ipsum. Cras ultrices erat nec leo luctus varius. Nulla sollicitudin tincidunt nulla, ut porta mauris volutpat vitae. Suspendisse ornare dolor sit amet massa venenatis pulvinar.</p>


                    </div>
                </div>
            </div>
        </div>


        <div class="row"><h1>Bottom section</h1></div>

    </div>

 </body>
</html>

For right to left (Arabic, etc) the code is:

<!doctype html>
<html lang="en">
 <head>
    <title>Test</title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


    <script type="text/javascript">
        $(document).ready(function () {

          jQuery('[data-toggle=offcanvas]').click(function () {

        // add this line to change the position of sidebar
        jQuery('.row-offcanvas').hasClass( "active" ) ? jQuery('.sidebar-offcanvas').css("position","absolute") :        jQuery('.sidebar-offcanvas').css("position","relative");  
        // end modif      

        $(".content-div").toggleClass("postion");


        jQuery('.row-offcanvas').toggleClass('active')
        });

        });

    </script>

 </head>
 <body>

<style>

.main-div{
    float:left;
    width:100%;
    overflow:hidden;
}
.postion{
    position:relative;
    margin-right:-50%;
}

@media(max-width:767px){

  .row-offcanvas {
    position: relative;
    -webkit-transition: all .25s ease-out;
         -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
  }

  .row-offcanvas-right {
    right: 0;
  }

  .row-offcanvas-left {
    left: 0;
  }

  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -50%; /* 6 columns */
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -50%; /* 6 columns */
  }

  .row-offcanvas-right.active {
    right: 50%; /* 6 columns */
  }

  .row-offcanvas-left.active {
    left: 50%; /* 6 columns */
  }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 50%; /* 6 columns */
  }

}

</style>

    <div class="container-fluid">

        <div class="row"><h1>Top section</h1></div>

        <div class="main-div">

            <div class="container">

                <div class="row row-offcanvas row-offcanvas-right">



                    <div class="col-xs-12 col-sm-9 content-div">
                        <p class="pull-right hide-p visible-xs">
                    <button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
                  </p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in aliquet nisl. Praesent sed leo congue, fringilla eros eu, tempus metus. Nam mollis odio ipsum, non vehicula ipsum accumsan sodales. Morbi varius vitae elit euismod cursus. Donec a dapibus justo, in facilisis nisi. Suspendisse ut turpis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui risus, tincidunt at odio ut, ultrices dignissim ipsum. Cras ultrices erat nec leo luctus varius. Nulla sollicitudin tincidunt nulla, ut porta mauris volutpat vitae. Suspendisse ornare dolor sit amet massa venenatis pulvinar.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in aliquet nisl. Praesent sed leo congue, fringilla eros eu, tempus metus. Nam mollis odio ipsum, non vehicula ipsum accumsan sodales. Morbi varius vitae elit euismod cursus. Donec a dapibus justo, in facilisis nisi. Suspendisse ut turpis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui risus, tincidunt at odio ut, ultrices dignissim ipsum. Cras ultrices erat nec leo luctus varius. Nulla sollicitudin tincidunt nulla, ut porta mauris volutpat vitae. Suspendisse ornare dolor sit amet massa venenatis pulvinar.</p>


                    </div>
                    <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
                        <ul>
                            <li class="activez"><a href="#">Home</a></li>
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 2</a></li>
                            <li><a href="#">Link 3</a></li>
                            <li><a href="#">Link 4</a></li>
                            <li><a href="#">Link 5</a></li>
                            <li><a href="#">Link 6</a></li>
                            <li><a href="#">Link 7</a></li>
                            <li><a href="#">Link 8</a></li>
                            <li><a href="#">Link 9</a></li>
                            <li><a href="#">Link 10</a></li>
                            <li><a href="#">Link 11</a></li>
                            <li><a href="#">Link 12</a></li>
                            <li><a href="#">Link 13</a></li>
                            <li><a href="#">Link 14</a></li>
                            <li><a href="#">Link 15</a></li>
                            <li><a href="#">Link 16</a></li>
                            <li><a href="#">Link 17</a></li>
                            <li><a href="#">Link 18</a></li>
                            <li><a href="#">Link 19</a></li>
                            <li><a href="#">Link 20</a></li>
                            <li><a href="#">Link 21</a></li>
                            <li><a href="#">Link 22</a></li>
                            <li><a href="#">Link 23</a></li>
                            <li><a href="#">Link 24</a></li>
                            <li><a href="#">Link 25</a></li>
                            <li><a href="#">Link 26</a></li>
                            <li><a href="#">Link 27</a></li>
                            <li><a href="#">Link 28</a></li>
                            <li><a href="#">Link 29</a></li>
                            <li><a href="#">Link 30</a></li>
                            <li><a href="#">Link 31</a></li>
                            <li><a href="#">Link 32</a></li>
                            <li><a href="#">Link 33</a></li>
                            <li><a href="#">Link 34</a></li>
                            <li><a href="#">Link 35</a></li>
                            <li><a href="#">Link 36</a></li>
                            <li><a href="#">Link 37</a></li>
                            <li><a href="#">Link 38</a></li>
                            <li><a href="#">Link 39</a></li>
                            <li><a href="#">Link 40</a></li>
                            <li><a href="#">Link 41</a></li>
                            <li><a href="#">Link 42</a></li>
                            <li><a href="#">Link 43</a></li>
                          </ul>
                    </div>
                </div>
            </div>
        </div>


        <div class="row"><h1>Bottom section</h1></div>

    </div>

 </body>
</html>
daliaessam
  • 1,636
  • 2
  • 21
  • 43
0

The problem you're experiencing with the stock offcanvass.css is that it sets the off canvas side bar to position:absolute, which effectively takes the column out of the flow of the page and causes it to overlay the footer when pulled into view. Use the following 3 steps for a simple CSS solution that requires no additional JS.

1. Use static positioning

To get the outcome you're wanting, i.e., to keep the side bar in the flow of the document so it forces the footer down when it comes into view, override the default offcanvas CSS by setting the side bar to position:static.

2. Set the height

Static positioning will put the side bar back in the document flow, but that also means it will cause the content area to be as tall as the side bar even when the side bar is off canvas. To correct that, set the side bar to height:0 when it's off canvas and back to height:auto when it's in view.

3. Set a width and negative margin

I also set a definite size for the side bar (so it doesn't default to the standard offcanvas.css size of 50%), and used an equal width negative left margin to pull it off the page.

Wrap it all in a media query for mobile screens, and you get:

@media (max-width: 767px) {
  .row-offcanvas-left .sidebar-offcanvas {
    position: static;
    width: 200px;
    margin-left: -200px;
    overflow: hidden;
    height: 0;
  }
  .row-offcanvas-left.active .sidebar-offcanvas {
    height: auto;
  }
  .row-offcanvas-left.active {
    left: 200px;
  }
}

See this JS Fiddle for the full example. I included a Bootstrap nav bar, a separate offcanvas toggle button that only shows when the side bar is off canvas, and a simple footer for the sake of completeness.

P.S.: I should mention that this method causes the footer to immediately jump to the bottom of the height of the side bar as soon as the side bar comes into view, and some users may not like that. However, it is possible to use CSS transitions and max-height to animate the expansion of the side bar as demonstrated in this SO post, but the result is less than ideal. I only mention it because it might be something others would like to use. Personally, I'm OK with the footer just instantly popping down lower.

Community
  • 1
  • 1
contendia
  • 161
  • 2
  • 9