Menu floating icon background on mobile and tablet

The current menu for the site involves a floating menu icon in the right-hand corner that when clicked a pop-up menu appears. I wrote some CSS for a black square behind the menu icon in order to cause contrast:

margin: 0 auto;
}
.mobile_menu_active .header-icons:before {
content:"MENU";
  position:absolute;
top:5px;
right:30px;
font-size:20px;
font-family: Raleway;
}
body:not(.mobile_menu_active) #headerwrap .header-icons:before {
content:"MENU";
  align:center;
  position:center;
top:0px;
left:30px;
font-size:20px;
font-family: Raleway;
}
body:not(.mobile_menu_active) #headerwrap .header-icons, body:not(.mobile_menu_active) #headerwrap .header-icons:before {
background:#000;
  position:center;
  align:center;
opacity: 0.7;
padding:10px;
}
.transparent-header #headerwrap.fixed-header{
background:transparent;
}

The issue I’m having is that on mobile and tablet reviews the background is not there. What should I add to the CSS to make sure that it shows on mobile and tablet?

the second issue is that when the pop-up menu appears that usually has a semi-transparent black background behind the lettering. The issue is that sporadically the background does not appear. It doesn’t seem to have any link to the device I’m using or the way I’m clicking the button in general. It seems to be random. Has anyone else had this problem or have any clue to how I could solve it?

• This topic was modified 4 years, 9 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

The page I need help with: [log in to see the link]