wordpress移動視圖中的引導菜單導航菜單

Question

我在頁眉中有兩個導航欄，它的中心是我的標誌。我正在使用WordPress，並且還包括bootstrap類。我在移動視圖中遇到了問題，或者最大寬度爲700+像素之間的問題。我的導航菜單在700像素以下時被破壞。我提供了一個截圖來確定我的問題。

而且，這裏是我的地盤：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; 
} 

Answer 1

您有一個媒體查詢，使導航浮動只剩下至少768px。某些瀏覽器呈現的像素略有不同，因此您可能已經注意到它不完全在768px。刪除查詢（或覆蓋它），你會沒事的！

@media (min-width: 768px) { 
    .navbar-nav>li { 
     float: left; 
    } 
} 

只是一個供參考不過，你將有大約400像素同樣的問題，所以你可以把它讓你的文字是在該窗口的大小更小。基本上，如果文本在窗口大小爲400像素時保持相同大小，那麼這些元素的容器太小並且會碰撞一個容器（聯繫我們）。再一次，這隻發生在400px左右。你可能想要給它替代治療，而不是像一個漢堡包圖標控制導航滑入視圖。