与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步行者导航

回答

相关问题