Fixed header appearing over elements in mobile navigation

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

Implemented a custom mobile navigation menu, and for some reason on mobile screens, a fixed header is appearing OVER the mobile navigation menu. Been racking my brain for hours on what could be causing this issue. Doesn't appear in the mobile screen in the Squarespace backend, but does when testing on actual phone. Which makes it difficult to target the element itself in the Inspect window. Reckon I may need to adjust the z-index of an element?

Not sure if I have another element that could be causing the issue, but I've looked at everything and can't seem to figure this out. Any help would be greatly appreciated! Also happy to provide any other info that you feel would be helpful. 

Code used to implement a fixed header & to change on scroll here: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>  
 $(window).on("scroll", function() {
    if($(window).scrollTop() > 400) {
        $(".Header").addClass("on-scroll");
    } else {
       $(".Header").removeClass("on-scroll");
    }
});
</script>

.Header{
  background-color: transparent;
  width: 100%;
  position: fixed!important;
  transition: 0.2s all linear;
  -webkit-transition:background-color .4s;
  -moz-transition:background-color .4s;
  transition:background-color .4s;
  z-index: 999;
}

.on-scroll{
    background-color: #e6dcd1!important;
  z-index: 999;
}

.on-scroll .Header-nav-item{
    color: #000!important;
}


.Header-inner--bottom {
  padding-bottom: 20px;
}

.on-scroll .Header-branding-logo {
    visibility: hidden;
}
.on-scroll .Header-branding {
    background-image: url(https://static1.squarespace.com/static/5a47c003c027d80d1f85c73d/t/5e88a47dc8efd76b478354ac/1586013309515/primary-logo-black.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  transition: .4s;
  width: 220px;
}

Code used for custom mobile navigation menu here: 
 

///Mobile Overlay///
//mobile 

.Mobile-overlay-nav-item {  
    text-align: center;
}

.Mobile-overlay-menu {
    background-image: url(https://static1.squarespace.com/static/5a47c003c027d80d1f85c73d/t/5e91ced3cfe71128e10e1bcb/1586613973454/Venice+Italy+Wedding+Anniversary+Photography+Session-+Destination+Italy+Wedding+Photographer+-+Michelle+Gonzalez+Photography+-109+%281%29.jpg);
    background-color: #f5deb3;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw !important;
}

.Mobile-overlay-close {
    z-index: 999;
background:transparent !important;
}

.Mobile-overlay-nav--primary {
padding-top:60px;
}

.mobileLogo {
width: 190px;
  margin-top: -20px;
}

//mobile branding logo//
@media only screen and (max-width: 640px) { .Mobile-bar-branding {
    -webkit-filter: invert(100%) !important;
    filter: invert(100%) !important;
    filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }}


//Add this to disable logo  on desktop
@media screen and (min-width:760px) {
.mobileLogo {
display:none;
}

.Header-nav--primary .Header-nav-item:nth-child(1) {
display:none !important;
}
}

.Mobile-overlay-nav--secondary .Mobile-overlay-nav-item:first-child {
    padding-top: 0em !important;
}

.Mobile-overlay-folder-item {
      text-align: center !important;
  padding-top:20px;
  font-family: 'Danmark Medium';//change as necessary
}

 .Mobile-overlay-folder {
padding-top:100px;
}

.Mobile-overlay-folder-item--toggle-label {
  font-family: 'Danmark Medium';
}


//Add this to disable logo  on desktop
@media screen and (min-width:760px) {
.mobileLogo {
display:none;
}

.Header-nav--primary .Header-nav-item:nth-child(1) {
display:none !important;
}
}

.Mobile-overlay-nav--secondary .Mobile-overlay-nav-item:first-child {
    padding-top: 0em !important;
}

.Mobile-overlay-folder-item {
      text-align: center !important;
  padding-top:20px;
  font-family: 'Danmark Medium';//change as necessary
}

 .Mobile-overlay-folder {
padding-top:100px;
}

.Mobile-overlay-folder-item--toggle-label {
  font-family: 'Danmark Medium';
}

The image of what the issue looks like on a mobile screen is attached. I've also attached a screen recording of the issue. Hopefully someone can help me narrow this down!