导航菜单在WordPress移动视图中的响应bootstrap

我有左右两个导航栏，它的宽度是50％和50％，它们的中心是我的标志。我的问题是我在移动视图中的导航菜单列表。当我点击我的菜单列表的下拉菜单时，我的其他主菜单宕机，我怎么能避免它下降。？请帮帮我。导航菜单在WordPress移动视图中的响应bootstrap

这里是我的网站链接：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>

这里是引导导航栏我的小自定义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; 
}

来源

2016-10-24 Jc John

在你的样式变化

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

到

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

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

来源

2016-10-24 05:44:04

导航菜单在WordPress移动视图中的响应bootstrap

回答

相关问题