Burger menu is preventing scrolling fucntionality?

Question

I'm creating a burger menu, with an animated drop-down or overlay, as part of the header for my website. Let's call it "mobile-header"-page.

Link to the website (funnily doesnt execute the function on desktop browser, but works fine when tested on the mobile phone):

https://andreasvoldmaa2.cargo.site/

However, since the drop-down menu need to fill the entire height of the viewport to display the entire menu - it means the header fills the entire height of the viewport as well, because it's all nested into "one"... this in turn, is preventing proper scrolling functionality (as you're likely to start dragging the "mobile-header"-page instead, in an attempt to scroll down the page).

I'm not really well-versed in coding or scripting - but there has to be a way to ensure the header is not interfering with the scrolling functionality of the page as a whole, while still making sure it has enough "height" to expand into the menu?

It's based on this, from CodePen: https://codepen.io/312_JohnC/pen/KVrjMa

I'm using Cargo 3.

HTML:

<div class="window">
  <div class="header">
    <div class="burger-container">
      <div id="burger">
        <div class="bar topBar"></div>
        <div class="bar btmBar"></div>
      </div>   
    </div>
    <img src="" style="height:30px; margin:10px 70px 0px; position:relative; float:right;">   
    <div class="icon icon-apple"></div>
&nbsp; &nbsp;&nbsp;<ul class="menu">
&nbsp; &nbsp; &nbsp;&nbsp;<li class="menu-item"><a href="#">Homepage</a></li>
      <li class="menu-item"><a href="#">About</a></li>
      <li class="menu-item"><a href="#">1</a></li>
      <li class="menu-item"><a href="#">2</a></li>
      <li class="menu-item"><a href="#">3</a></li>
    </ul>
    <div class="shop icon icon-bag"></div>
  </div>
  <div class="content">&nbsp;
 &nbsp;</div>
</div>

CSS:

@import url(https://fonts.googleapis.com/css?family=Ek+Mukta:200);

.window {
    background: linear-gradient(white, rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0));
    position: sticky;
    display: block;
    width: 360px;
    height: 100vh;
    margin: 100px auto 0;
    box-shadow: 0 0 65px 15px rgba(0, 0, 0, 0.24);
    overflow: hidden;
    border-radius: 3px;
    z-index: -9999999;
    transition: opacity 0.3s ease-in-out;
}

.window .header {
    position: sticky;
    display: block;
    top: 0;
    left: 0;
    height: 50px;
    width: 100%;
    background: rgba(0, 0, 0, 0);
    overflow: hidden;
    transition: all 0.5s ease-out, background 1s ease-out;
    transition-delay: 0.2s;
    z-index: 1;
}

.window .header .burger-container {
    position: sticky;
    display: inline-block;
    height: 50px;
    width: 50px;
    cursor: pointer;
    transform: rotate(0deg);
    transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.window .header .burger-container #burger {
    width: 18px;
    height: 8px;
    position: relative;
    display: block;
    margin: -4px auto 0;
    top: 50%;
}

.window .header .burger-container #burger .bar {
    width: 100%;
    height: 1px;
    display: block;
    position: sticky;
    background: #000000;
    transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    transition-delay: 0s;
}

.window .header .burger-container #burger .bar.topBar {
    transform: translateY(0px) rotate(0deg);
}

.window .header .burger-container #burger .bar.btmBar {
    transform: translateY(6px) rotate(0deg);
}

.window .header .icon {
    display: inline-block;
    position: absolute;
    height: 100%;
    line-height: 50px;
    width: 50px;
    height: 50px;
    text-align: center;
    color: #FFF;
    font-size: 22px;
    left: 50%;
    transform: translateX(-50%);
}

.window .header .icon.icon-bag {
    right: 0;
    top: 0;
    left: auto;
    transform: translateX(0px);
    transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    transition-delay: 0.65s;
}

.window .header ul.menu {
    position: relative;
    display: block;
    padding: 0px 48px 0;
    list-style: none;
}

.window .header ul.menu li.menu-item {
    border-bottom: 1px solid #003456;
    margin-top: 5px;
    transform: scale(1.15) translateY(-30px);
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}

.window .header ul.menu li.menu-item:nth-child(1) {
    transition-delay: 0.49s;
}

.window .header ul.menu li.menu-item:nth-child(2) {
    transition-delay: 0.42s;
}

.window .header ul.menu li.menu-item:nth-child(3) {
    transition-delay: 0.35s;
}

.window .header ul.menu li.menu-item:nth-child(4) {
    transition-delay: 0.28s;
}

.window .header ul.menu li.menu-item:nth-child(5) {
    transition-delay: 0.21s;
}

.window .header ul.menu li.menu-item:nth-child(6) {
    transition-delay: 0.14s;
}

.window .header ul.menu li.menu-item:nth-child(7) {
    transition-delay: 0.07s;
}

.window .header ul.menu li.menu-item a {
    display: block;
    position: relative;
    color: #FFF;
    font-family: "Ek Mukta", sans-serif;
    font-weight: 100;
    text-decoration: none;
    font-size: 22px;
    line-height: 2.35;
    font-weight: 200;
    width: 100%;
}

.window .header.menu-opened {
    height: 100%;
    background-color: #002555;
    transition: all 0.3s ease-in, background 0.5s ease-in;
    transition-delay: 0.25s;
}

.window .header.menu-opened .burger-container {
    transform: rotate(90deg);
}

.window .header.menu-opened .burger-container #burger .bar {
    transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    transition-delay: 0.2s;
}

.window .header.menu-opened .burger-container #burger .bar.topBar {
    transform: translateY(4px) rotate(45deg);
}

.window .header.menu-opened .burger-container #burger .bar.btmBar {
    transform: translateY(3px) rotate(-45deg);
}

.window .header.menu-opened ul.menu li.menu-item {
    transform: scale(1) translateY(0px);
    opacity: 1;
}

.window .header.menu-opened ul.menu li.menu-item:nth-child(1) {
    transition-delay: 0.27s;
}

.window .header.menu-opened ul.menu li.menu-item:nth-child(2) {
    transition-delay: 0.34s;
}

.window .header.menu-opened ul.menu li.menu-item:nth-child(3) {
    transition-delay: 0.41s;
}

.window .header.menu-opened ul.menu li.menu-item:nth-child(4) {
    transition-delay: 0.48s;
}

.window .header.menu-opened ul.menu li.menu-item:nth-child(5) {
    transition-delay: 0.55s;
}

.window .header.menu-opened ul.menu li.menu-item:nth-child(6) {
    transition-delay: 0.62s;
}

.window .header.menu-opened ul.menu li.menu-item:nth-child(7) {
    transition-delay: 0.69s;
}

.window .header.menu-opened .icon.icon-bag {
    transform: translateX(75px);
    transition-delay: 0.3s;
}

.window .content {
    font-family: "Ek Mukta", sans-serif;
    padding: 67px 4% 0;
    text-align: justify;
    overflow: scroll;
    max-height: 100%;
}

.window .content::-webkit-scrollbar {
    display: none;
}

.window .content h2 {
    margin-bottom: 0px;
    letter-spacing: 1px;
}

.window .content img {
    width: 95%;
    position: relative;
    display: block;
    margin: 75px auto 75px;
}

.window .content img:nth-of-type(2) {
    margin: 75px auto;
}

@media (max-width: 600px) {
    .window {
        top: 0;
        width: 100%;
        height: 100vh;
        margin: 0;
        border-radius: 0px;
        z-index: -1;
    }
    .window .header {
        position: absolute;
    }
}

[id="J2926239532"].page {
    min-height: var(--viewport-height);
    justify-content: center;
}

[id="J2926239532"] .page-content {
    padding: 0rem;
    align-items: flex-start;
}

Javascript (within my "global"-HTML file):

<script>
// Function to toggle menu-opened class
function toggleMenu() {
    var header = document.querySelector('.header');
    if (header) {
        header.classList.toggle('menu-opened');
    } else {
        console.error("Could not find header element.");
    }
}

// Add event listener to toggle menu when burger icon is clicked
function setupMenu() {
    var burger = document.querySelector('.burger-container');
    if (burger) {
        burger.addEventListener('click', toggleMenu);
    } else {
        console.error("Could not find burger element.");
    }
}

// Add event listener to menu items to close menu when clicked
function setupMenuItems() {
    var menuItems = document.querySelectorAll('.menu-item');
    if (menuItems.length > 0) {
        menuItems.forEach(function(item) {
            item.addEventListener('click', toggleMenu);
        });
    } else {
        console.error("No menu items found.");
    }
}

// Execute script when the entire page has finished loading
window.onload = function() {
    setupMenu();
    setupMenuItems();
};
</script>

Any help would be appreciated!

Now, I've tried playing with having the header reduced to 10vh when it isn't "activated" and then expand to 100vh once activated - but this sort of shifted where to click the burger menu, and definitely disturbed the functionality.

Cargo is also a bit difficult to work with Javascript in, but I've found that the Javascript i posted here works when deployed from Cargo, however the original Javascript from Codepen, didn't work - but works in the website-editor of Cargo 3.