Show Mobile Hamburger Menu on Desktop

Hi, I currently have used the following code to force the mobile navigation menu to show on desktop:

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

/* Desktop overlay */
@media screen and (min-width:992px) {
div.container.header-menu-nav-item a {
    margin-top: 0.9vw;
    margin-bottom: 0.5vw;
}
a.theme-btn--primary.btn {
    font-size: 1.2rem;
    padding-top: 5px;
    padding-bottom: 5px;
}
}
 

But I have been having some issues with it that I would like to fix:

- Whenever I click the hamburger menu, the logo shows through the menu. 

-On mobile version now, when I click the hamburger menu and close it, for a split second the original mobile navigation shows at full screen.

I have attached screenshots as well.

I'm not sure I can fix this for you.

Honestly for features like this I use a well-designed plugin like this one:

https://www.ghostplugins.com/products/forced-mobile-menu-in-squarespace-71