Hamburger on Desktop with Full Screen Navigation \ Custom Color

Hey all, 

I am trying to replicate what this website (hrdwrker.com) has a 1) hamburger on the desktop, 2) leaves out the button on the header, 3) It does a full screen drop down. 

I have found the following code address 1 &2  but there are issues I am trying to fix

A) In mobile, I see the dropdown nav "menu" first that need I click on to see pages. I just want it to show the pages immediately

B) I would like the menu to be full screen in desktop

C) I would like the full screen menu to be a custom grey (#D1CCC5) in desktop and mobile

Any body have thoughts?

I found other coding examples but they don't work on my site. My site it goodiscontagious.com

a.header-nav-folder-title {
    visibility: hidden;
}
a.header-nav-folder-title:before {
    content: "\e030";
    font-family: 'squarespace-ui-font';
    visibility: visible;
    font-size: 50px;
    color: white;
}

@tuanphan @Mark.Hook @Beyondspace Got ideas? 

Use this code

@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;
  }
}