0

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;
  }
}
daveycroqet
  • 2,667
  • 7
  • 35
  • 61

1 Answers1

3

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/

NooBskie
  • 3,761
  • 31
  • 51
  • 1
    Good answer, only thing the OP should keep in mind is that if the menu extends beyond the y-axis (e.g. lots of menu items) suddenly you've got two scroll bars. Fine for most people and works perfectly well, but may throw some people who don't understand why there are suddenly two scrollbars. Obviously most people seeing this will be on a small device that's probably touchscreen so wouldn't see scroll bars anyway, but worth keeping in mind. – Rob Quincey Sep 24 '15 at 13:41
  • Thanks. Could I add ``overflow:hidden`` to the menu element so it doesn't show? – daveycroqet Sep 25 '15 at 00:47