Custom Burger Menu

Hi there!

I have edited my desktop site to allow for a burger menu to be displayed instead of several navigation links at the top. This works really well, however when I view it in the mobile version of the site it is showing the folder and then the links, is there any way I can have both a burger menu on the desktop and on the mobile site match?

The first two images are my desktop site which I really like. The 3rd and fourth images show the issue and the last image is my page set-up. 

Hope this makes sense, any help is truly appreciated! :)

HELP NEEDED!

I have edited my desktop site to allow for a burger menu to be displayed instead of several navigation links at the top. This works really well, however when I view it in the mobile version of the site it is showing the folder and then the links, is there any way I can have both a burger menu on the desktop and on the mobile site match?

The first two images are my desktop site which I really like. The 3rd and fourth images show the issue and the last image is my page set-up. 

Hope this makes sense, any help is truly appreciated! 🙂

Add to Design > Custom CSS

/* Show folder on Desktop - Normal nav on mobile */
@media only screen and (max-width: 767px) {
  .header-menu-nav-folder[data-folder="root"] {
    display: none !important;
  }
  .header-menu-nav-folder-content .header-menu-controls {
    display: none;
  }
  .header-menu-nav-folder:not([data-folder="root"]) {
    transform: unset;
    transition: unset;
  }
}