PROBLEM with Invisible But Clickable Hamburger Menu on Desktop 7.1

Url - www.coachhenrylam.com

I used this in custom css

Hamburger Icon is Clickable but invisible not matter what color I change in code below or edit style.

.header .header-burger{
display:flex
} 
.header-nav, .header-actions {display:none}
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
width: 50%;
margin-left: 50%;
box-shadow: -5px 5px 15px #000 }

/* Colour of Hamburger Button */
.burger-inner > div {
  background-color: white !important;
}

1 hour ago, coachhenrylam said:

I used this in custom css

Hamburger Icon is Clickable but invisible not matter what color I change in code below or edit style.

 

.header .header-burger{
display:flex
} 
.header-nav, .header-actions {display:none}
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
width: 50%;
margin-left: 50%;
box-shadow: -5px 5px 15px #000 }

 

/* Colour of Hamburger Button */
.burger-inner > div {
  background-color: white !important;
}

What's the url to your website?

At first glance this code seems fine. 

I've even run it on my own website and it works. 

Try removing the code > saving > refresh page > add the code again > save > refresh page

You can use this CSS code (Website > Website Tools > Custom CSS)

@media screen and (max-width:991px) {
	.header-menu-nav-folder {
    transform: unset !important;
}
.header-menu-controls.container.header-menu-nav-item {
    display: none;
}
[data-folder="root"]>.header-menu-nav-folder-content:first-child {
    display: none;
}}