2015-11-20 71 views
0

我建立了一個靜態引導網站,導航欄工作正常,但在轉換爲wordpress模板的過程中,我偶然發現了一個問題,無法弄清楚。wordpress bootstrap導航欄總是展開

基本上,當導航欄崩潰以適應正確的屏幕寬度時,導航欄菜單始終展開,切換按鈕也不會切換以隱藏/顯示。

這裏是我的全部導航欄的HTML代碼:

<div id="navbar-wrapper" class="navbar-wrapper"> 
     <div class="navbar navbar-default navbar-static-top" role="navigation"> 
     <div class="navbar-inner"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="/"><img class="logo" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/logo_blue_ls.png" alt="Relax on Ryan"></a>  
       </div><!-- navbar header --> 

       <!-- if the menu (WP admin area) is not set, then the "menu_class" is applied to "container". IN other words, it overwrites the "container_class". Ref: http://wordpress.org/support/topic/wp-nav-menu-class-usage-bug?replies=4 --> 

       <?php 
        wp_nav_menu(array(

         'theme_location' => 'primary', 
         'container'   => 'nav', 
         'container _class' => 'navbar-collapse collapse', 
         'menu_class'  => 'nav navbar-nav navbar-right' 

        )); 
       ?> 

      </div><!-- navbar-container --> 
     </div><!-- navbar-inner --> 
    </div><!-- navbar --> 
</div><!-- navbar-wrapper --> 

任何援助將不勝感激。我想知道我的數據目標是否可能被錯誤定義?

感謝, 希思

+0

你錯過了' 'CONTAINER_ID'=>「navbar''您的數組(它不會exapand的原因和崩潰)的內部和''容器_class''出現在下劃線之前留出空格(這可能來自複製和粘貼)。見[Bootstrap Navwalker](https://github.com/twittem/wp-bootstrap-navwalker) – vanburen

+0

謝謝vanburen。全部排序。我檢查了我的代碼很多次,仍然錯過了這個空間...... – nankers27

+0

沒問題,你應該考慮刪除你的問題,因爲這是一個簡單的印刷錯誤。 – vanburen

回答

0
<div id="navbar-wrapper" class="navbar-wrapper"> 
    <nav id="navigation" class="navbar navbar-default navbar-static-top" role="navigation"> 
     <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 

       <a class="navbar-brand" href="<?php echo home_url(); ?>"> 
       <img id="logo" src="{logo}" class="img-responsive" alt="Image"> 
       </a> 
     </div> 
     <?php wp_nav_menu(array(
      'menu'   => 'primary', 
      'theme_location' => 'primary', 
      'depth'   => 2, 
      'container'  => 'div', 
      'container_class' => 'navbar-collapse collapse', 
      'container_id' => 'bs-example-navbar-collapse-1', 
      'menu_class'  => 'nav navbar-nav navbar-right', 
      )); 
     ?> 
     </div><!-- /.container --> 
    </nav> 
</div> 
+2

關於爲什麼這是解決OP問題的一些解釋很好。 –