Can't scroll within mobile drop down nav

Question

I am having some troubles with the mobile menu landscape, - I am unable to scroll. To clarify I meant by scrolling so I see the whole menu. When scrolling now, it stops after a certain amount of px (the height of the header). Please minimize the window so it looks like mobile landscape if you want to take a look by yourself.

As the image shows, you are not able to see the the whole menu.

The problem is the following:

header {
    position: fixed;
}

It needs to be fixed, but I must be able to scroll. Any suggestions?

I have tried to remove some part of the code to make it easier to understand.

HTML

<header class="nav-down">
    <nav class="navbar navbar navbar-fixed-top site-navigation" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Aarseth-Navbar">
                <section class="si-icons si-icons-default">
                    <span class="si-icon si-icon-hamburger-cross" data-icon-name="hamburgerCross"></span>
                </section>
            </button>
            <div id="navbar-brand-cont">
                <a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>">
                    <img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo.jpg">
                </a>
            </div>
        </div>
        <div class="collapse navbar-collapse" id="Aarseth-Navbar">
            <ul class="nav navbar-nav">
                <?php wp_nav_menu( array( 'menu' => 'Hovedmeny', 'menu_class' => 'nav-menu' )); ?>
            </ul>
        </div>
    </nav>
</header>

CSS

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}

.nav-up {
    top: -120px;
}
    
.navbar-fixed-top { 
    position: absolute;
}
    
.nav-menu { 
    margin-top: 90px;
    padding-bottom: 25px;
}


@media screen and (max-width: 767px) {
    header {
        height: 100px;  
    }
    
    .site-navigation ul {
        display: block; 
    }
    #Aarseth-Navbar ul li {
        clear: both;
        margin-left: 0;
        float: none;
        display:block;
        margin-top: 15px;
        padding-bottom: 15px;
    }
    
    .navbar-collapse {
        height: auto;
        max-height:none;
        margin-top: 20px;
        padding-left: 0;
        padding-right: 0;
    }
    
    #Aarseth-Navbar {
        overflow: hidden;
    }
    
    .navbar-nav {
        width: 100%;    
    }
    
    .menu-hovedmeny-container {
        padding-top: 0px;   
    }
        
    .nav-menu {
        padding-left: 0px;  
        padding-bottom: 0px;
    }
    
    .site-navigation ul {
        width: 100%;    
    }
    
    .menu-hovedmeny-container {
        padding-right: 0px; 
    }
    
    .navbar-brand {
        padding-bottom: 0px;    
    }
    .sub-menu {
        display: block; 
        width: 100%;
        position: relative;
    }
            
    .navbar-collapse {
        max-height: none!important;
    }
}

If you want to take a look: https://minerva.hivolda.no/~V15_MID203_aarseth/produkt/

Note: I am working on fixing the menu icon right now, so if you don't see it, press at the right corner where it's naturally that the hamburger/menu icon is. The href works, its just the svg that I am having some troubles with.

Please ask if something is unclear.

Answer 1

If you want your mobile, drop-down nav to be scrollable you have to define a height with the wrapper div that you coded to encase the mobile nav. You should define a height, and you should set overflow-y to scroll and might as well add touch scroll.

#MobileMenuDivWrapper { 
  height: 200px;
  max-height: 200px;
  width: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling:touch; // mobile safari
}

Answer 2

The issue for me was the height units (from this forum).

I had to change the height in the menu div from height: 100% to height: 100vh