Burger menu on main site

Site URL: http://pleasurecontrol.org

Hi there 

Is it possible to get the exact same burger menu from the mobile version to the main site. Already, I know that I will have too many navigation links so if I could hide the links in a burger menu, it would be most preferable. I customized my burger menu icon, so if I could just force that on to the main site it would be perfect.

I don't know what this code will do with your custom burger icon. 

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}

Thank you so much! This worked! 

Only issue I am having is how to make the menu not cover the whole screen and reducing the space between the navigations links. I can reduce the space for mobile version, but not for the desktop version. Any suggestions? 

No suggestions yet, but I see what you want to do. 

@derricksrandomviews Hi, do you know if there is a way to do this on scroll? after I scroll to a certain point like after the 1st section on 7.1 id like it to roll up into a burger menu  on the left