Search code examples
twitter-bootstrap-3adminlte

AdminLTE - How to collapse sidebar but not top navbar?

AdminLTE 2.4.3 Demo: https://adminlte.io/themes/AdminLTE/index2.html

I'd like to collapse the left side bar but not the top nav bar when clicking the collapse icon.

I've played around with it but can't seem to find an easy solution for this. Because the collapse function is applied on the <body> tag, I'm not sure how to get around it.

For instance, I'd like it to collapse like this:

enter image description here

Solution

  • Add these styles

    @media (min-width: 768px) {
  .sidebar-mini.sidebar-collapse .main-header .logo {
    width: 230px;
    z-index: 1001;
    position: relative;
    color: white;
  }
}

@media (min-width: 768px) {
   .sidebar-mini.sidebar-collapse .main-header .logo>.logo-mini {
       display: none;
   }
}

@media (min-width: 768px) {
   .sidebar-mini.sidebar-collapse .main-header .logo>.logo-lg {
       display: block;
   }
}