Responsive menu Materialize doesn't collapse after clicking

Question

please if you can help me to make the menu functioning when clicking on mobile, sidenav works but not disappearing when clicking on a link. It remains open the overlay covering the page loaded.

I paste the code, it could be messy (i know), but not prepared, and I've just made some attempts (sorry for my English, I'm Italian).

 <script type="text/javascript" src="js/materialize.min.js"></script> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="js/materialize.js"></script> <script src="js/init.js"></script> <script src=js/jquery.js type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</script> <script> document.addEventListener('DOMContentLoaded', function() { var elems = document.querySelectorAll('.sidenav'); var instances = M.Sidenav.init(elems, options); }); // Or with jQuery $(document).ready(function(){ $('.sidenav').sidenav(); }); $( document ).ready(function(){ $('.sidenav').sideNav({ closeOnClick: true } ); }); </script> <script> (function($){ $(function(){ $('.sidenav').sideNav(); }); // end of document ready })(jQuery); // end of jQuery name space 

 <!--Fixed Navbar --> <div class="navbar-fixed"> <nav> <div class="nav-wrapper white"> <a href="#" class="brand-logo">xxxx</a> <a href="#" class="sidenav-trigger" data-target="mobile-nav" ><i class="material-icons">menu</i></a> <ul class="right hide-on-med-and-down"> <li><a href="#servizio">Prezzi</a></li> <li><a href="#preventivi">Cosa posso fare per te</a></li> </ul> </div> </nav> </div> <ul class="sidenav" id="mobile-nav"> <li><a href="#servizio">Prezzi</a></li> <li><a href="#">Cosa posso fare per te</a></li> </ul> 

image of the menu on mobile

Answer 1

Add the class .sidenav-close to an element inside the sidenav and any click event on that element will cause the sidenav to close. Check Documentation for more functions.

<nav>
    <div class="nav-wrapper">
        <a href="#!" class="brand-logo">Logo</a>
        <a href="#" data-target="mobile-demo" class="sidenav-trigger">
            <i class="material-icons">menu</i>
        </a>
        <ul class="right hide-on-med-and-down">
            <li>
                <a href="#1">Sass</a>
            </li>
            <li>
                <a href="#2">Components</a>
            </li>
            <li>
                <a href="#3">Javascript</a>
            </li>
            <li>
                <a href="#4">Mobile</a>
            </li>
        </ul>
    </div>
</nav>

<ul class="sidenav" id="mobile-demo">
    <li>
        <a class="sidenav-close" href="#1">Sass</a>
    </li>
    <li>
        <a class="sidenav-close" href="#2">Components</a>
    </li>
    <li>
        <a class="sidenav-close" href="#3">Javascript</a>
    </li>
    <li>
        <a class="sidenav-close" href="#4">Mobile</a>
    </li>
</ul>
<script>
$(document).ready(function () {
    $('.sidenav').sidenav();
});
</script>

Sidenav - Materialize