0

I am trying to remove a nagging feature from a Jekyll theme I am using. The theme is called Sera by Gleesik. In essence, the mobile nabber is toggled by hitting the hamburger, the navbar pops in, and the hamburger turns into an X which can be used to close the navbar. However, it seems there is some CSS or JS that also enables the navbar to be swiped away, this is problematic because I have a rather large navbar now, and so when a user (on a phone) tries to scroll they sometimes cause the navbar to swipe to close. While it is a neat feature, I can live with only the X providing the close functionality.

Link to live preview of the theme - need to use it as mobile to see what I'm talking about

Also, I've not pasted in the CSS as even the scss file for header-responsive is too large for here. I understand this isn't the best question for here, but I am totally stuck. Even if someone could point me towards a css or js feature that does what I describe above, that would be a tremendous help since I don't even know what I am looking for.

On discussion with a friend he suggested I paste this JS from the project:

  // Close Mobile Menu
  $nav_menu.removeClass('active');
  $toggle_menu_button.removeClass('active');
  $body.removeClass('no-scroll');

});

// Toggle Mobile Menu
$toggle_menu_button.on('click', function() {
  $nav_menu.toggleClass('active');
  $body.toggleClass('no-scroll');
  $(this).toggleClass('active');
});

Reurning yet again with some CSS this time, I've isolated the following.

// No Scroll - Lock body scrolling.
&.no-scroll {
  height: 100vh;
  overflow-y: hidden;


  .site-header .container {
    &:before {
      width: auto;
      height: auto;
      background-color: $black-transparent;
    }
  }

}

Edit: Not really an answer, but this is what I did, I removed the following which was found down the page:

$window.on('resize', function() {
  $nav_menu.removeClass('active');
  $body.removeClass('no-scroll');
  $toggle_menu_button.removeClass('active');
});

Good enough I guess, kinda bummed that iOS seems to break standards w/r/t this issue. Maybe I'm totally off base, who knows.

Thank You.

ercfre
  • 183
  • 9
  • I tried adding `position:fixed;` to the `no-scroll` class which actually did solve the issue, but the problem is it created other worse issues, like for instance, trying to open the menubar from middle of page causes page to scroll back to the top and then not even open the menubar (a second click from very top of page will open menu, nevertheless, this is not worth it IMO). But I do think that I'm getting closer, since targeting this class did have an effect. – ercfre Jan 01 '17 at 21:59
  • I found [this thread](http://stackoverflow.com/questions/9280258/prevent-body-scrolling-but-allow-overlay-scrolling) which addresses this very topic, but still have yet to implement any of their suggestions successfully. – ercfre Jan 01 '17 at 22:35
  • It truly seems hopeless. iOS is so darn broken when it comes to this issue. Not a one of the things I tried from the linked thread were effective. ugh – ercfre Jan 02 '17 at 19:35

0 Answers0