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:
Portable device (red circled sidemenu should be hidden):
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();
}
});