Question

我使用MaterialiseCSS的导航栏作为我的网页。添加导航元素并切换到响应模式后，我可以找到显示折叠的按钮。点击它，我会看到侧面导航链接。然而，按钮被禁用（侧面导航器顶部似乎有一个覆盖层）。单击任何链接时，侧面导航将消失。

这是我的导航栏代码：

<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

尝试将＃移动菜单放在导航栏div之外。

Answer 2

解决方案：将sidenav移动到.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>

materializecss移动导航栏已禁用

2 个答案: