Bootstrap SB Admin customization

Question

I am a new web developer and working on some automation project at the moment. I want to use sb admin theme for my website front with some custom functionality.

Link of the theme I want to use: https://startbootstrap.com/themes/sb-admin-2/

When your on desktop the side bar is not collapsed and when your on mobile sidebar become collapsed. What i want to make is that on mobile i dont want the sidebar to be collapsed. I want it to be full widht as on desktop but still toggleable.

Collapsed Sidebar

Full Width Sidebar

Also I have made some changes on jquery codes according to my needs. But when I refresh the page or load it on mobile the sidebar just comes and goes back to its toggled version back again it look like a bug. What i want is to collapsed the sidebard when it opens or refresh for the firs time but with out this bug.

    (function($) {
  "use strict"; // Start of use strict

  // 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');
    };
  });

  $(".container-fluid").on('click', function(e) {
    if ($(".sidebar").hasClass("accordion")) {
      $("body").addClass("sidebar-toggled");
      $(".sidebar").addClass("toggled"); 
    }
  });   

  $( document ).ready(function() {
    function screenClass() {
      if($(window).innerWidth() > 768) {
        $(".sidebar").hover(function(e) {
          $("body").removeClass("sidebar-toggled");
          $(".sidebar").removeClass("toggled");
        });
        $("#content").hover(function(e) {
          $("body").addClass("sidebar-toggled");
          $(".sidebar").addClass("toggled");
        });
      } else {
        $("body").addClass("sidebar-toggled");
        $(".sidebar").addClass("toggled");
      }  
    } 

    screenClass();

    $(window).bind('resize',function(){
      screenClass();
    });
  });   

  // Close Sub Menus When Hover Over Content
  $("#content").hover(function(e) {
    $("#test-button").addClass("collapsed"); // This test button has to be added into htm nav links as an id
    $("#collapseTwo").removeClass("show");
  });

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

  // Scroll to top button appear
  $(document).on('scroll', function() {
    var scrollDistance = $(this).scrollTop();
    if (scrollDistance > 100) {
      $('.scroll-to-top').fadeIn();
    } else {
      $('.scroll-to-top').fadeOut();
    }
  });

  // Smooth scrolling using jQuery easing
  $(document).on('click', 'a.scroll-to-top', function(e) {
    var $anchor = $(this);
    $('html, body').stop().animate({
      scrollTop: ($($anchor.attr('href')).offset().top)
    }, 1000, 'easeInOutExpo');
    e.preventDefault();
  });

})(jQuery); // End of use strict

Sidebar Bug

Could you please help me the design the full width sidebar on mobile and fix the bug. Thank you.

Answer 1

Use can Chrome dev tools and remote android debugging to step through the javascript. It will help you identify what is causing the menu to close on page load.

Your problem is in your screenClass()

 function screenClass() {
  if($(window).innerWidth() > 768) {
    $(".sidebar").hover(function(e) {
      $("body").removeClass("sidebar-toggled");
      $(".sidebar").removeClass("toggled");
    });
    $("#content").hover(function(e) {
      $("body").addClass("sidebar-toggled");
      $(".sidebar").addClass("toggled");
    });
  } else {
    $("body").addClass("sidebar-toggled");
    $(".sidebar").addClass("toggled");
  }  
}