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左右。你可能想要给它替代治疗，而不是像一个汉堡包图标控制导航滑入视图。