Search code examples
htmlcsstwitter-bootstraptwitter-bootstrap-3jasny-bootstrap

Bootstrap/Jasny "offcanvas" sidebar menu freezes page contents (i.e. prevents scrolling)


Fiddle.

This is literally the 'Off Canvas Reveal' demo from Jasny located here. All I did was extend the page content so that it needed a scrollbar.

After clicking the hamburger menu, the page contents become frozen/unscrollable. How do I fix this behavior? I want to be able to continue scrolling the page while the menu is out.

CSS:

html, body {
  height: 100%;
}

.navbar-toggle {
  float: left;
  margin-left: 15px;
}

.navmenu {
  z-index: 1;
}

.canvas {
  position: relative;
  left: 0;
  z-index: 2;
  min-height: 100%;
  padding: 50px 0 0 0;
  background: #fff;
}

@media (min-width: 0) {
  .navbar-toggle {
    display: block; /* force showing the toggle */
  }
}

@media (min-width: 992px) {
  body {
    padding: 0;
  }
  .navbar {
    right: auto;
    background: none;
    border: none;
  }
  .canvas {
    padding: 0;
  }
}

Solution

  • You just need to add

    html,
    body{
      overflow-y:scroll!important;
    }
    

    By default jasney adds overflow:hidden; to the body

    Jsfiddle http://jsfiddle.net/z3wfct19/1/