0

I'm using MaterializeCSS's navbar for my webpage. After adding the nav element and switching to responsive mode, I can find the collapsed button appearing. On clicking it, I am shown the side nav with the links. However the buttons are disabled (there seems to be an overlay on top of the side nav). On clicking any of the links, the side nav disappears.

This is my navbar code:

<div class="navbar-fixed scrollspy" id="main">
        <nav>
            <div class="container nav-wrapper">
                <a href="#!" class="brand-logo center">SRS Constructions</a>
                <a href="#" data-activates="mobile-menu" class="button-collapse"><i class="fa fa-bars"></i></a>
                <ul class="left hide-on-med-and-down">
                    <li class="active"><a href="#main">Home <span class="sr-only">(current)</span></a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#services">Services</a></li>
                </ul>
                <ul class="right hide-on-med-and-down">
                    <li><a href="#">Our Projects</a></li>
                    <li><a href="#">Why Us</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
                <ul class="side-nav" id="mobile-menu">
                    <li><a href="#main">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#">Our Projects</a></li>
                    <li><a href="#">Why Us</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </nav>
 </div>

This is how it looks when I click on the 3 bars :

enter image description here

I have the full page uploaded to Github here.

2 Answers 2

1

Try to place your #mobile-menu outside of your navbar div.

1
  • The problem arises because official Materialize documentation shows that the mobile menu can be inside the navbar div. This is confusing.
    – MiniGunnR
    Sep 15, 2017 at 5:34
1

The solution: Move the sidenav outside of .navbar-fixed

<div class="navbar-fixed">
    <nav>
        <div class="nav-wrapper"> <a href="#!" class="brand-logo">Logo</a>
            <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
            <ul class="right hide-on-med-and-down">
                <li><a href="sass.html">Sass</a></li>
                <li><a href="badges.html">Components</a></li>
                <li><a href="collapsible.html">Javascript</a></li>
                <li><a href="mobile.html">Mobile</a></li>
            </ul>
        </div>
    </nav>
</div>

<ul class="side-nav" id="mobile-demo">
    <li><a href="sass.html">Sass</a></li>
    <li><a href="badges.html">Components</a></li>
    <li><a href="collapsible.html">Javascript</a></li>
    <li><a href="mobile.html">Mobile</a></li>
</ul>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.