Styling Moblie Nav

Hi,

I've applied css to my nav to hamburger menu  for desktop however the style isn't applied to mobile.

I feel like this is a simple fix but I can't quite get it.

This is the code I've used: 

/* If you only want to have the desktop burger visible this CSS will remove all the */
@media(min-width:767px) {
.header-nav-list a:not([href="/burger"]) {
display: none;
}
}

// Mobile Menu Text //

.burger-box:after {
content: "=";
text-align: right;
font-size: 30px;
color: #000;
display: block !important;
}

.burger-box {
  width: 10px !important;
  height:0px !important;
}
.burger-box div {
display: none;
}

/* This will handle styling the burger icon color*/
a[href="/burger"] path {
    fill: #7A7768!important;
}

/* Removes the underline set by Squarespace active class */
a[href="/burger"] {
    background: none !important;
}

/* This will handle styling the background color of the burger overlay */
better-burger {
    background: #B7B19C;
}

better-burger {
    background: #B7B19C;
}

I'm also trying to get rid of the folder link on mobile.

I've attached pics for reference - current mobile menu

Edit 767px to 1px