Colapsar sidebar

0

I have a project that uses the AdminLte template, and I do not know how to make the sidebar collapse:

I have managed to change color when the size of the screen exceeds 500px but I do not know how to make it also collapse:

@media (min-width: 500px) {

  .main-sidebar {
    background: #ff0000 !important;
    margin-left: 0 !important;
 }

}

In the Adminlte template I have caught this:

    @media (max-width: 767px) {
  .main-sidebar,
  .left-side {
    -webkit-transform: translate(-230px, 0);
    -ms-transform: translate(-230px, 0);
    -o-transform: translate(-230px, 0);
    transform: translate(-230px, 0);
  }
}


    @media (min-width: 768px) {
  .sidebar-collapse .main-sidebar,
  .sidebar-collapse .left-side {
    -webkit-transform: translate(-230px, 0);
    -ms-transform: translate(-230px, 0);
    -o-transform: translate(-230px, 0);
    transform: translate(-230px, 0);
  }
}

    @media (max-width: 767px) {
  .sidebar-open .main-sidebar,
  .sidebar-open .left-side {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

Please, I need help.

    
asked by carlos 07.12.2018 в 19:19
source

1 answer

0

At what time do you want it to collapse ?, you tried with display: none

@media (min-width: 500px) {

  .main-sidebar {
    background: #ff0000 !important;
    margin-left: 0 !important;
    display: none;
 }

}
    
answered by 07.12.2018 в 21:55