位于我的网站上,我有2个导航栏,一个用于主导航,另一个用于漫画。
他们反应灵敏,但我认为当我添加z-index时,他们变得对联合国有反应。
以下是我网站标题的HTML / PHP。它是2个导航栏。
下面的代码是用于设置这些导航栏样式的CSS。
堆栈溢出让我在发布更新之前添加更多细节,但正如我所说的基本上我试图使这个网站响应和某些东西(我怀疑Z-Index)导致它不是。我需要一些关于原因的指导。
<div class="navbar navbar-inverse navbar-fixed-top my-navbar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<?php
wp_nav_menu(array (
'theme_location' => 'primary',
'container' => 'nav',
'container_class' => 'navbar-collapse collapse',
'menu_class' => 'nav navbar-nav navbar-left my-nav'
));
?>
</div><!-- ==== CLOSE CONTAINER ==== -->
</div> <!-- ==== CLOSE NAVBAR ==== -->
</div> <!-- ==== CLOSE NAVBAR WRAPPER ==== -->
<!-- ==== NAVBAR COMIC ==== -->
<div class="navbar-wrapper">
<div class="navbar navbar-inverse navbar-fixed-top comic-navbar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand comic-title" href=""><?php the_title(); ?></a>
<a class="navbar-brand comic-date" href=""><?php the_date(); ?></a>
</div>
<?php
wp_nav_menu(array (
'theme_location' => 'comic',
'container' => 'nav',
'container_class' => 'navbar-collapse collapse',
'menu_class' => 'nav navbar-nav navbar-left'
));
?>
</div>
</div>
</div>
.my-navbar {
background-color: #DE0074;
margin: 0;
-webkit-box-shadow: 0 8px 6px -6px #000;
-moz-box-shadow: 0 8px 6px -6px #000;
box-shadow: 0 8px 6px -6px #000;
}
.my-navbar ul.nav > li > a:after {
/*content: "|";*/
padding-right: 20px;
padding-left: 20px;
}
.comic-navbar {
margin-top: 10px;
background-color: #FFF;
border-bottom: 1px solid #DE0074;
z-index: 99;
position: relative;
}
.comic-navbar ul.nav > li > a:after {
/*content: "|";*/
padding-right: 20px;
padding-left: 20px;
}