Mobile Menu button only working sometimes and greyed out after clicking menu points

the mobile menu button is not always clickable. When it is clickable and you click on a link you get forwarded to the side and the menu collapses, but then the whole page is having a grey foreground which goes away after one click.

I am using angular 4 and materialize css in the latest version.

Thanks for help.

Friendly Regards

Here is the html:


<header>
<div class="navbar-fixed">
    <nav>
        <div class="nav-wrapper">
            <a href="#/">
                <img class="brand-logo logo" src="assets/logo/smawandi_Logo_RGB_3c.png">
            </a>
            <a href="#" data-activates="mobile-demo" class="button-collapse black-text"><i class="material-icons">menu</i></a>
            <ul class="right hide-on-med-and-down black-text">
                <li><a class="menu-text" href="#/services">Unsere Leistungen</a></li>
                <li><a class="menu-text" href="#">To be speci</a></li>
                <li><a class="menu-text" href="#">New</a></li>
                <li><a class="menu-text" href="#">New</a></li>
            </ul>
        </div>
    </nav>
</div>

<!-- Mobile Menu -->
<ul class="side-nav" id="mobile-demo">
    <div>
        <h2 class="center-align underline-blue menu-text-mobile">Menü</h2>
        <br>
    </div>
    <li><a class="menu-text-mobile" href="#/services"><i class="material-icons">apps</i>Unsere Services</a></li>
    <li><a class="menu-text-mobile" href="badges.html"><i class="material-icons">apps</i>Components</a></li>
    <li><a class="menu-text-mobile" href="collapsible.html"><i class="material-icons">apps</i>Javascript</a></li>
    <li><a class="menu-text-mobile" href="mobile.html"><i class="material-icons">apps</i>Mobile</a></li>
</ul>
</header>

This is one part of my ts file:

$( document ).ready(function(){ $(".button-collapse").sideNav();})

Dogfalo / materialize

Mobile Menu button only working sometimes and greyed out after clicking menu points #5205