0

I'm using SB admin 2 template for bootstrap 4 and I'm facing issues with the side menu. When website is shown on a portable device the side menu should be hidden, instead the hamburger icon should appears. But isn't working like that, see picture below. What can I check? Thanks

Normal size display:

enter image description here

Portable device (red circled sidemenu should be hidden):

enter image description here

1 Answers1

0

I found the solution for this, just edit the sb-admin-2.js file, like this:

Code snippet - before

// Toggle the side navigation
  $("#sidebarToggle, #sidebarToggleTop").on('click', function(e) {
    $("body").toggleClass("sidebar-toggled");
    $(".sidebar").toggleClass("toggled");
    if ($(".sidebar").hasClass("toggled")) {
      $('.sidebar .collapse').collapse('hide');
    };
  });
...
  // Prevent the content wrapper from scrolling when the fixed side navigation hovered over
  $('body.fixed-nav .sidebar').on('mousewheel DOMMouseScroll wheel', function(e) {
    if ($(window).width() > 768) {
      var e0 = e.originalEvent,
        delta = e0.wheelDelta || -e0.detail;
      this.scrollTop += (delta < 0 ? 1 : -1) * 30;
      e.preventDefault();
    }
  });

Code snippet - after

  // Toggle the side navigation
  $(document).on('click', '#sidebarToggle, #sidebarToggleTop', function(e) {
    $("body").toggleClass("sidebar-toggled");
    $(".sidebar").toggleClass("toggled");
    if ($(".sidebar").hasClass("toggled")) {
      $('.sidebar .collapse').collapse('hide');
    };
  });
...
  // Prevent the content wrapper from scrolling when the fixed side navigation hovered over
  $(document).on('mousewheel DOMMouseScroll wheel', 'body.fixed-nav .sidebar', function(e) {
    if ($(window).width() > 768) {
      var e0 = e.originalEvent,
        delta = e0.wheelDelta || -e0.detail;
      this.scrollTop += (delta < 0 ? 1 : -1) * 30;
      e.preventDefault();
    }
  });