Hamburger Menu Code Help

Site URL: https://www.reachnaz.com

I need my hamburger menu to be white. It is currently black. This is the code that I am using for the menu. What do I need to change or add to make the menu white and not black.

.header .header-burger{display:flex} .header-nav, .header-actions {display:none}
.header--menu-open .header-menu {
opacity: 100;
visibility: visible;
width: 30%;
margin-left: 70%;
box-shadow: -5px 5px 15px #000}
div.header-menu-nav-item a {
    font-size: 20px !important;
    padding: 10px;
}
.header-menu-nav-item {line-height: 20px!important;}
@media screen and (min-width:992px) {
.header-menu-actions {
    justify-content: center !important;
}
.header-menu-cta {
    position: relative;
    top: -100px;
}
}
@media screen and (max-width:991px) {
.header--menu-open .header-menu {
    width: 100% !important;
    margin-left: 0 !important;
}
}

Add this to Top of Custom CSS

body:not(.header--menu-open) .burger-inner>div {
    background-color: white !important;
}

I believe that the code turned my whole header white. I have my header invisible with a background video playing behind it, so I have the logo and hamburger menu white. So, I need the header completely transparent and only the logo and hamburger menu white.

That code affect burger menu only. If it affect header, you should check all code, maybe you place code in wrong position, caused some other code didn't work properly

This is the code that is in CSS:

body:not(.header--menu-open) .burger-inner>div {
    background-color: white !important;
}
.header .header-burger{display:flex} .header-nav, .header-actions {display:none}
.header--menu-open .header-menu {
opacity: 100;
visibility: visible;
width: 30%;
margin-left: 70%;
box-shadow: -5px 5px 15px #000}
div.header-menu-nav-item a {
    font-size: 20px !important;
    padding: 10px;
}
.header-menu-nav-item {line-height: 20px!important;}
@media screen and (min-width:992px) {
.header-menu-actions {
    justify-content: center !important;
}
.header-menu-cta {
    position: relative;
    top: -100px;
}
}
@media screen and (max-width:991px) {
.header--menu-open .header-menu {
    width: 100% !important;
    margin-left: 0 !important;
}
}

I think I have it working now.