I am currently working on a project using Materialize CSS where a popup login portal will appear overlaying the home screen after clicking the login button located in the navigation bar.

The issue is that the modal does not appear when I am trying to click the login button. Others suggest to include the JavaScript code for the Materialize modal which I did but it still does not work. I was hoping to ask if the issue lies with how the <div> tags is enclosed within the <ul> tags or I have overlooked something.

Below is the code I used and the design of the application:

nav.hbs

<nav>
    <div class="nav-wrapper">
        <a href="#" class="brand-logo">
            <img src="/imgs/logo-white.png" width="200px" height="50px">
        </a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li>
                <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Login</a>
            </li>
            <!-- Modal Structure -->
            <div id="modal1" class="modal">
                <div class="modal-content">
                    <h4>Modal Header</h4>
                    <p>A bunch of text</p>
                </div>
                <div class="modal-footer">
                    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
                </div>
            </div>
        </ul>
    </div>
</nav>


<script type="text/javascript">
    $(document).ready(function () {
        $('#modal1').modal();
    });
</script>