與WordPress引導3步行者導航

這裏的問題是 http://firehouseservices.com/a3k/與WordPress引導3步行者導航

我想實現的引導3導航到我的WordPress所涉及的導航。我的問題是：

當導航崩潰並顯示「菜單」按鈕來展開菜單時，該按鈕似乎並沒有做任何事情。它不打開摺疊菜單。
檢查第一個鏈接「自動營銷」它有一個下拉項目，下拉工作正常，子菜單項目上的鏈接工作正常，但自動營銷的主鏈接只顯示「＃」的鏈接，所以它不會產生正確的鏈接。
我可以將菜單設置爲在比現在崩潰更小的像素範圍內摺疊？

這是我在我的header.php代碼菜單拉：

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-top-collapse"> 
       <span class="sr-only">Toggle navigation</span>Menu 
      </button> 

     </div> 
     <div id="navbarCollapse" class="collapse navbar-collapse"> 
     <?php 
      wp_nav_menu(array(
       'menu'  => 'top_menu', 
       'depth'  => 2, 
       'container' => false, 
       'menu_class' => 'nav navbar-nav', 
       'fallback_cb' => 'wp_page_menu', 
       'walker' => new wp_bootstrap_navwalker()) 
      ); 
     ?> 
     </div> 
    </div> 
</nav>

這裏是我的functions.php代碼：

// Register Custom Navigation Walker 
require_once('wp_bootstrap_navwalker.php'); 

// Add the 'top_menu' location in a theme setup function. 
function bootpress_setup() { 
    register_nav_menus(
     array(
      'top_menu' => 'Top Menu' 
     ) 
    ); 
} 

// Add setup function to the 'after_setup_theme' hook 
add_action('after_setup_theme', 'bootpress_setup');

我還使用腳本在header.php上使下拉工作懸停

<script> 
$(function() { 


$('ul.nav li.dropdown').hover(function() { 
$('.dropdown-menu', this).fadeIn('fast'); 
}, function() { 
$('.dropdown-menu', this).fadeOut('fast'); 
}); 

}); 
</script>

而我拉在jQuery和bootstrap.js在我的頭這樣：

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script src="<?php $blog_title = get_bloginfo('template_directory'); ?  
>/js/bootstrap.min.js"></script>

任何在這一要求的上固定我的問題1-3的幫助將是非常讚賞。

來源

2014-03-28 Andrea

我發現這個問題在Google中排名很高，很驚訝，還沒有答案。

這裏的問題是菜單按鈕是針對頁面上的錯誤元素。當它應該以ID #navbarCollapse爲目標時，它使用data-target=".navbar-top-collapse"。

更正代碼來解決點1將是：

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-top-collapse"> 
       <span class="sr-only">Toggle navigation</span>Menu 
      </button> 

     </div> 
     <div id="navbarCollapse" class="collapse navbar-collapse"> 
      <?php 
       wp_nav_menu(array(
        'menu'  => 'top_menu', 
        'depth'  => 2, 
        'container' => false, 
        'menu_class' => 'nav navbar-nav', 
        'fallback_cb' => 'wp_page_menu', 
        'walker' => new wp_bootstrap_navwalker()) 
       ); 
      ?> 
     </div> 
    </div> 
</nav>

關於第2點：這是預期的行爲。可打開的下拉菜單的可點擊鏈接不適合移動設備。 Ed McIntyre - 您在此主題中使用的bootstrap navwalker課程的製作者，有意識地決定堅持Bootstraps移動友好性質，並確保navwalker與孩子取消關聯。這使得他們能夠打開「觸摸」事件的下拉菜單，而不僅僅是懸停。第3點：更改摺疊大小涉及到將數十（可能是數百）CSS覆蓋到Bootstrap的核心CSS。手動操作是一種徹底的痛苦。如果你使用LESS，那麼你可以簡單地修改@grid-float-breakpoint變量。如果需要，您也可以通過Bootstrap Customizer來完成。

來源

2014-07-25 02:37:14

我用下面的方法解決了這個問題：

添加腳本

(function($){ $(document).ready(function(){ $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) { event.preventDefault(); event.stopPropagation(); $(this).parent().siblings().removeClass('open'); $(this).parent().toggleClass('open'); }); }); })(jQuery);

從該行if ($args->has_children && $depth === 0)在wp_bootstrap_navwalker.php文件中刪除&& $depth === 0

Screenshot

來源

2017-04-16 19:38:50

與WordPress引導3步行者導航

回答

相關問題