CODEWITHSUNDEEP
csshtml
Janath
Janath

Reputation: 1248

Scrollable off canvas menu

I just found an interesting off-canvas menu on codepen. If someone clicks the hamburger icon, it shows overlay menu with its content. But that overlay menu couldn't scroll down at all. If someone scrolls down, the page behind is scrolling; not the overlay menu. I need to scroll down that overlay page. I checked the code and and found the problem. It uses overflow:hidden for that wrapper div. I set overflow: auto to that div; seems problem solved. But background page is still scrolling down with overlay menu. How can I set only overlay menu to be scrolled down?

.overlay {
  position: fixed;
  background: $color-main;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
}

Here is the link for codepen

Upvotes: 0

Views: 2031

Answers (1)

tsdln
tsdln

Reputation: 107

make overflow:scroll; at overlay class then add more links to menu. it will scroll.

for page scroll, change the jquery like this

$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
$('body').css('overflow', 'hidden');
});

that will make body non-scrollable when menu clicked.

Upvotes: 1

Related Questions