Находясь на моем сайте, у меня есть 2 навигационных панели, одна для основной навигации и одна для комиксов.
Они были отзывчивы, но я думаю, что когда я добавил z-index, они стали реагировать на UN.
Ниже приведен 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;
}
Задача ещё не решена.
Других решений пока нет …