Question

我试图在手机上查看页面时创建一个折叠成按钮的菜单。我使用bootstrap，但是对于这个导航，我想以不同的方式设计导航，所以我自己创建了。

当媒体切换到手机时，该按钮不可见，但导航确实消失。如何在介质尺寸更改时显示按钮？

我尝试了很多东西，这就是我现在所拥有的：

HTML：

    <div class="pattern col-lg-12 col-md-12 col-sm-6">
        <div class="banner col-lg-3 col-md-3 col-sm-2">
            <img src="img/logo4.png">
        </div>
        <!-- menu -->
        <div class="navbar-header">
            <button class="mnav-toggle" type="button" id="mnav-toggle">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="mnav col-lg-9 col-med-9 col-sm-4" id="navbar-main">
            <ul class="mnav-list" id="mnav-list">
                <li class="mnav-item"><a href="#">Contact</a></li>
                <li class="mnav-item"><a href="#">About</a></li>
                <li class="mnav-item"><a href="#">Artists</a></li>
                <li class="mnav-item"><a href="#">Studios</a></li>
                <li class="mnav-item"><a href="#">Gear</a></li>
            </ul>
        </div>
    </div>

CSS：

@media (max-width: 767px)
{
    .mnav-list {display: none;}
}

#mnav-toggle
{
     display: none;
}

Answer 1

从我所看到的你需要先添加＆＃34; display：block＆＃34;如上面评论中所述进入您的查询，其次，媒体查询应放在您的基线css规则之下，如下所示：

Working Example

#mnav-toggle
{
    width:20px; height:50px;
    background:red;
     display: none;
}

@media all and (max-width: 767px)
{
    .mnav-list {display: none;}
#mnav-toggle{     display: block;}
}

Answer 2

这是因为稍后编写的css规则优先于先前为同一元素编写的规则。

在手机上查看时创建可折叠导航

2 个答案: