Question

我左右两个导航栏，宽度为50％到50％，中心是我的标识。我的问题是移动视图中的导航菜单列表。当我点击菜单列表的下拉菜单时，我的其他主菜单会关闭，我怎么能避免它下降。？请帮帮我。

以下是我的网站链接：http://bxuwp.codebox.ph/

以下是我的问题的屏幕截图：

到目前为止，这很好：

单击下拉菜单时出现问题。

这是我的代码：

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">

    <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 class="logo-wrapper">

        <div class="logo">
            <?php if ( get_theme_mod( 'm1_logo' ) ) : ?>
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" id="site-logo" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
            <img src="<?php echo get_theme_mod( 'm1_logo' ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"></a>
            <?php else : ?>
                  <img class="logo" src="<?php echo get_bloginfo('template_url') ?>/images/qmark_logo.png"/>
            <?php endif; ?>
        </div>
    </div>

    <div class="half">      
        <ul class="left-navlist">
            <?php
            $args = array(
                  'container'      => 'div',
                  'container_class'   => 'collapse navbar-collapse pull-right',
                  'container_id'      => 'bs-example-navbar-collapse-1',
                  'menu'        => 'left',
                  'menu_class'        => 'nav navbar-nav',
                  'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                  'walker'            => new wp_bootstrap_navwalker()
            );
            ?>
            <?php wp_nav_menu($args); ?>
        </ul>
    </div>
    <div class="half">      
        <ul class="right-navlist">
            <?php
            $args1 = array(
                  'container'      => 'div',
                  'container_class'   => 'collapse navbar-collapse',
                  'container_id'      => 'bs-example-navbar-collapse-1',
                  'menu'        => 'right',
                  'menu_class'        => 'nav navbar-nav',
                  'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                  'walker'            => new wp_bootstrap_navwalker()
            );
            ?>
            <?php wp_nav_menu($args1); ?>
        </ul>
    </div>
    </div>
    </div>

这是我用于bootstrap导航栏的小型自定义CSS：

    .navbar-fixed-top {
        min-height: 95px;
    }
    .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover {
        background-color: #e1e1e1;
        color: #fff;
    }
    .navbar-inverse {
        border-radius: 0px;
        margin-bottom: 0;
        background-color: #e1e1e1;
        border-color:#e1e1e1;
        font-size: 16px;
    }
    .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover {
        background-color: #e1e1e1;
        color: #993300;
    }
    .navbar-inverse .navbar-nav > li > a {
        color: #252525;
    }
    .logo-wrapper {
        text-align: center;
        margin-bottom: -65px;
    }

    .logo {
        margin-top: 5px;
        max-width: 80px;
        display: inline-block;
    }
    .half {
        width: 50%;
        display: block;
        float: left;
    }

    .right-navlist {
        padding-left: 60px;
    }

    .left-navlist {
        text-align: right;
        padding-right: 60px;
    }
.drop {
    position: absolute;
}
.nav > li {
    float: left;
}
.navbar-inverse {
    font-size: 11px;
}
.dropdown-menu {
    font-size: 11px;
}

Answer 1

在样式表中更改

.navbar-nav .open .dropdown-menu {
   position: static;
}

到

.navbar-nav .open .dropdown-menu {
   position: absolute;
}

或者只是删除位置静态代码，因为默认情况下bootstrap对下拉列表有position: absolute;规则。

WordPress移动视图

1 个答案: