2 навигационные панели, использующие z-index, не работают так, как задумано

Находясь на моем сайте, у меня есть 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;
}

0

Решение

Задача ещё не решена.

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]