cssasp.netbootstrap-4responsive-designside-menu

Sb admin template for bootstrap 4 problem with side menu


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


Solution

  • 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();
        }
      });