Custom burger menu on desktop 7.1

Site URL: http://uppercutdanseteater.squarespace.com

Hi!

I would like to have a burger menu on the right side corner of my website, but when clicking on it, it hides the background as if I'm entering a new site. And I would like it to look like this: 

(transparent when you click on the burger so that you still se the background as well as to be able to use the folders) 

I am currently using this code:

@media screen and (min-width:950px) {.header-nav, .header-actions { display: none!important} .header-burger { display: flex!important;} .header--menu-open .header-menu {opacity: 1; visibility: visible;}}

and I only managed to do this to my site: 

I have searched for DAYS and I'm really a beginner with coding so I would appriciate the help SO MUCH : ))

On 12/3/2020 at 11:16 PM, uppercutlinn said:

Site URL: http://uppercutdanseteater.squarespace.com

Hi!

I would like to have a burger menu on the right side corner of my website, but when clicking on it, it hides the background as if I'm entering a new site. And I would like it to look like this: 

(transparent when you click on the burger so that you still se the background as well as to be able to use the folders) 

I am currently using this code:

@media screen and (min-width:950px) {.header-nav, .header-actions { display: none!important} .header-burger { display: flex!important;} .header--menu-open .header-menu {opacity: 1; visibility: visible;}}

 

and I only managed to do this to my site: 

 

 

I have searched for DAYS and I'm really a beginner with coding so I would appriciate the help SO MUCH : ))

 

 

Could you try this css

body[data-menu-overlay-theme-switcher="true"] .header-menu .header-menu-bg {
  background-color: transparent;
}
body[data-menu-overlay-theme-switcher="true"].header--menu-open .header .header-burger .top-bun, body[data-menu-overlay-theme-switcher="true"].header--menu-open .header .header-burger .patty, body[data-menu-overlay-theme-switcher="true"].header--menu-open .header .header-burger .bottom-bun {
  background: #fff;
}
body[data-menu-overlay-theme-switcher="true"] .header-menu .header-menu-nav a:not(.btn) {
  color: #fff;
  padding: 0;
  padding-bottom: 0.7em;
  font-size: 4vmin;
}

I think I am maybe doing it wrong... cause it doesn't work.. : - )))

7 hours ago, uppercutlinn said:

I think I am maybe doing it wrong... cause it doesn't work.. : - )))

Have you add it into Design->Custom CSS

yep! not working : ((

12 hours ago, uppercutlinn said:

yep! not working : ((

 

take screenshot of how your custom css screen look like