html - materializecss 移动导航栏被禁用

Question

我正在为我的网页使用 MaterializeCSS 的导航栏。添加导航元素并切换到响应模式后，我发现折叠按钮出现了。单击它时，我会看到带有链接的侧面导航。但是按钮被禁用(侧面导航顶部似乎有一个覆盖层)。单击任何链接时，侧导航会消失。

这是我的导航栏代码:

<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>

这是我点击 3 个栏时的样子:

我已将完整页面上传到 Github here .

Answer 1

尝试将#mobile-menu 放在导航栏 div 之外。