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

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

0 голосов
/ 24 апреля 2018

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