導航菜單在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

回答

相關問題