响应式导航菜单不显示在动画横幅顶部答案

【问题标题】：responsive nav menu doesn't show on top of animated banner响应式导航菜单不显示在动画横幅顶部
【发布时间】：2015-06-26 06:08:14
【问题描述】：

我查找了类似的问题，但找不到。我正在使用 bootstrap css3 html5，我在主页上有一个使用 Slider Revolution jQuery 插件完成的动画横幅。导航主菜单出现在平板电脑和移动屏幕的滑块横幅后面。我已尝试使用 zindex 值，但无法正常工作。

<style>
.mynavbar {
text-align:center;
z-index:1999 !important;
}
.mynavbar .nav {
float:none;
font-family: 'Amatic SC', cursive;
font-size:30px;
font-weight:700;
color:#000;
}
.mynavbar .nav li {
display:inline-block;
float:none;
margin:0 15px;
vertical-align:middle;
}
.mynavbar .nav li a {
color:#000;
}
.mynavbar .nav li a:hover {
color:#FC5504;
}
.mynavbar .nav li.mylogo a, .mynavbar .nav li.mylogo a:hover {
background:transparent;
max-width:200px;
}
.mynavbar .nav li.mylogo a img {
width:100%;
height:auto;
vertical-align:middle;
display:inline-block;
}
.navbar-brand {
display:none
}
@media screen and (max-width:768px) {
.mynavbar {
text-align:left;
z-index:9999 !important;
}
.navbar-brand {
display:inline
}
.mynavbar .nav {
margin-top:3em;
}
.mynavbar .nav li {
display:block;
background-color:#FFFFFF;
margin:0;
padding-left: 2em;
border-bottom:1px solid #E9E6E6;
}
.mynavbar .nav li a {
border-radius:0;
display:block;
}
.mynavbar li.mylogo {
display:none
}
}
</style>
</head>

<body>
<header>
<div class="row-menu">
    <nav class="navbar navbar-default" role="navigation">
            <div class="container"> 
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                            <button type="button" class="navbar-toggle"     data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
                            <a href="index.html" class="navbar-brand">    <img src="images/logo-small.png" width="125" height="104" alt=""/></a>     </div>
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse mynavbar" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav ">
                                    <li><a href="index.html">HOME</a></li>
                                    <li><a href="#">COMPAÑIA</a></li>
                                    <li><a href="#">PRODUCTOS</a></li>
                                    <li class="mylogo"><a href="index.html"><img src="images/amapola-logo.png" alt="Logo"></a></li>
                                    <li><a href="recetas.html">RECETAS</a></li>
                                    <li><a href="#">COMUNIDAD</a></li>
                                    <li><a href="#">CONTACTO</a></li>
                            </ul>
                    </div>
                    <!-- /.navbar-collapse --> 
            </div>
            <!-- /.container --> 
    </nav>
 </div>
</header>

您可以在这里查看页面：menu issue

【问题讨论】：

标签： jquery css html drop-down-menu

【解决方案1】：

放一个 z-index:100;在您的 .navbar 上为我工作。
它在 bootstrap.min.css987654323@ 的第 42 行

【讨论】：

感谢您回答我，但仍然无法正常工作，奇怪的是在此页面中 link 不是横幅也不起作用，而在此页面中 link 它是工作正常。我不确定我做错了什么......
嘿 Rigo Collazo，我可能错了，但我认为您将 z-index 放在了错误的 div 上。尝试将其放在
上。不是
问题是我正在覆盖默认导航栏，因为我的菜单中间有徽标。我的 css 'code' .mynavbar 类的 z-index:1999;
抱歉 Rigo Collazo 我可能不理解你...“我的菜单中间有一个徽标”我不知道这是什么意思。无论如何，我在答案中添加了一个屏幕截图，向您展示了我做了什么（以蓝色突出显示）和结果（在右侧）。
在 Rigo 上摇滚！祝你网站上的其他人好运。到目前为止看起来不错。