Collapse sidebar menu Flex


I am creating admin panel for my site and I got sidebar menu which I need to hide to hamburger icon and collapse it only when I click it. I was looking for solutions but didn’t find much. I was hoping you guys would help me with my problem. I got flex sidebar menu with code like this:

  @include flexbox();
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  flex: 0 0 18%;
  min-height: 100%;
  margin: 0;
  background-color: $oc-gray-9;
    display: block;
    width: 87.25%;
    text-align: left;
    padding-left: 5vh;
    text-decoration: none;
    color: $oc-gray-6;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 10vh;
    font-family: CaviarDreams;
    font-size: 1.15vw;
    background-color: $oc-red-9;
    color: $oc-gray-2;
    .menu-img {
    opacity: 1;
    width: 90%;
    height: auto;
  .menu-img {
    width: 7%;
    height: auto;


And HTML like this:

<div class="sidebar">
<img src="logo.png" class="logo-img">
  <a class="hvr-fade" href="index.php"><img src="dash.png" class="menu-img"> Dashboard</a>
    Other code here....

Any ideas how could I do this ?

Thank you.


Can you make a codepen or something the code doesnt work in a snippet? Atleast provide a functional code which produces the minimum required output.



Using jQuery:

$(document).on('click', '.<your hamburger icon class>', function(){

This should do the trick it’s what I use on most of my sidebar navs.

Jquery is pretty straightforward if you haven’t used it before. But makes DOM manipulation really easy. Basically it just binds an event handler to your hamburger class and then executes the function to slide toggle the sidebar each time the hamburger is clicked.



Add a Comment