使用z-index响应的2个导航栏不能按预期工作

时间:2018-04-24 17:55:21

标签: php css wordpress z-index responsive

位于我的网站上,我有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;
}

0 个答案:

没有答案