Question

我找了一个类似的问题但找不到它。我正在使用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

Answer 1

放z-index：100;你的.navbar为我工作。
它位于bootstrap.min.css enter image description here

的第42行

响应式导航菜单不会显示在动画横幅上

1 个答案: