Forced Hamburger on Desktop, Clicking Menu Folders Now Shoots Primary Menu Off Screen Left, How to Target

So I have some custom CSS on our site to force the mobile menu on desktop, which seems to be working great. We've just noticed today, however, that when a user clicks into a dropdown, the first layer of the menu shoots off to the left. This is pictured in the secondary.png image attached. I realize that because I have made the head menu smaller than full screen this is effecting the situation, but I am hoping to have both layers of the menu visible. I hope that is clear. I am not sure how to word it. 

I can't seem to figure out what to target to bring the first layer of the menu back on to our menu background. Does anyone have any ideas? Thanks in advance for any ideas. 

Site URL: songbirdsfoundation.org

Here is the custom code I have running right now: 

@media screen and (max-width: 5000px) {
  /* Display burger icon at all widths and align right */  
  .header .header-burger {
    display: flex;
    order: 2 !important;
    padding-left: 100 !important;
  }
  /* Make burger menu visible at all widths */  
  .header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
  }
  /* Hide primary navigation menu */ 
  .header .header-title-nav-wrapper .header-nav {
    display: none;
  }
  
 /*makes mobile menu NOT full screen*/
.header--menu-open .header-menu {
opacity: 1; visibility: visible;
width: 255; 
margin-left: 20vw;
box-shadow: -5px 5px 15px #000}
  
  /* Moves cart to left and keeps space away from burger*/
.header-actions--right .header-actions-action {
    margin: 0 0 0 -5.799999999999997vw;
}}
/*targets menu text items*/
.header-menu-nav-item a {
    font-size: 24px;
      line-height: 0;
      margin: 3.5vh 10vw;
      font-family: Futura
}

UPDATE: Now a bunch of my nav links are just unresponsive 😞 I'm not sure what has changed. 

Hi,

What is site url?

Sorry, I thought that was included in the post. It's songbirdsfoundation.org 

@tuanphan I removed the part of the CSS that was making the mobile menu appear NOT full screen as a temporary fix. But now suddenly many of the nav links are simply unresponsive. I am really not sure what is going on on now. Do you have any ideas?

.header--menu-open .header-menu {
opacity: 1; visibility: visible;
width: 255; 
margin-left: 20vw;
box-shadow: -5px 5px 15px #000}

Try this new CSS code to force burger on desktop

/* Force burger on desktop */
  .header-burger {
    display: flex !important
}

.header--menu-open .header-menu {
    opacity: 1 !important;
    visibility: visible !important
}

.header-nav,.header-actions {
    visibility: hidden !important
}
@media screen and (min-width:768px) {
  .header-menu {
        left:unset;
        width: 25%
    }
}

@tuanphan Thanks! The only problem I see now is that the shopping cart is gone, and I'm not quite sure how to get it back. Here's what I am running now: 

/* Force burger on desktop */
  .header-burger {
    display: flex !important;
    order: 2 !important;
    padding-left: 100 !important;
}
.header--menu-open .header-menu {
    opacity: 1 !important;
    visibility: visible !important
}
.header-nav,.header-actions {
    visibility: hidden !important
}
@media screen and (min-width:768px) {
  .header-menu {
        left:unset;
        width: 100%
    }
}
/*targets menu text items*/
.header-menu-nav-item a {
    font-size: 24px;
      line-height: 0;
      margin: 3.5vh 10vw;
      font-family: Futura
}

I got the shopping cart back, but now I the top level link within the hamburger is not working on desktop. Have you ever seen anything like that @tuanphan? For example, if you click (on desktop) The hamburger, then foundation, the "about" link does not work. This seems to be the case throughout the menu. Any ideas? Here's the code I have running now:

@font-face {
  font-family: SmileComix; src: url(https://static1.squarespace.com/static/638e4a86cbe97808c985de4e/t/63e1552aac02ac126cd4adef/1675711786366/Smilecomix.ttf);
}
h1 {
font-family: SmileComix;
font-size: 25pt;
font-weight: 400;
  /*for dropshadow on h1 the third px number is blur*/
text-shadow: 2px 1px 0px black;
}
/* Force burger on desktop */
  .header-burger {
    display: flex !important;
    order: 2 !important;
    padding-left: 100 !important;
}
.header--menu-open .header-menu {
    opacity: 1 !important;
    visibility: visible !important
}
.header-nav {
    visibility: hidden !important
}
.header-actions-action{
  margin-right: 35px !important;
}
@media screen and (min-width:768px) {
  .header-menu {
        left:unset;
        width: 100%
    }
}
/*targets menu text items*/
.header-menu-nav-item a {
    font-size: 24px;
      line-height: 0;
      margin: 3.5vh 10vw;
      font-family: Futura
}
/*Targets the gallery TEXT*/
.gallery-section .gallery-caption p {
    letter-spacing: 0.01em !important;
    line-height: 1.2em !important;
    font-weight: 800 !important;
    font-size: .75em !important;
} 
/*adjusts the space below gallery captions*/
.gallery-slideshow-wrapper {
    margin-bottom: 70px !important;
}
/*targets the name of the month on the event calendar*/
.yui3-squarespacecalendar .compact-layout .yui3-calendar-header h1 {
    font-family: 'Futura'!important;
    font-weight: 700!important;
    text-shadow: none!important;
}
.yui3-squarespacecalendar .yui3-calendar-header h1 {
    font-family: 'Futura'!important;
    font-weight: 700!important;
    text-shadow: none!important;
}
/*targets the name of the event on the event calendar pop out*/
.yui3-squarespacecalendar .flyoutitem-title {
    font-family: 'Futura'!important;
    font-weight: 700!important;
    text-shadow: none!important;
}
/*targets event title on the event detail page*/
.eventitem-title {
    font-family: 'futura-pt'!important;
    font-weitght: 700!important;
    text-shadow: none!important;
}
/*targets event title on the main event page*/
.eventlist-title .eventlist-title-link {
    font-family: 'futura-pt'!important;
    font-weitght: 800!important;
    text-shadow: none!important;
}

I have found that this part of the code is making the hamburger links not work. Specifically changing the line height or margins breaks it:

/*targets menu text items*/
.header-menu-nav-item a {
    font-size: 24px;
      line-height: 0;
      margin: 3.5vh 10vw;
      font-family: Futura
}

How can I customize the the menu text but not break the links?