Problems with WordPress Bootstrap 3 Walker Nav

Question

Here is the navigation in question http://firehouseservices.com/a3k/

I am trying to implement the Bootstrap 3 nav into my WordPress. My issues are:

when the navigation collapses and shows "menu" button to expand the menu, the button doesn't seem to do anything. It doesn't open the collapsed menu.
check the first link "automated marketing" it has a drop down item, the drop down works fine and the link on the submenu item works fine, but the main link for automated marketing just shows the link of "#" so it doesn't produce the correct link.
where I can I set the menu to collapse at a smaller pixel range than it is collapsing now?

Here is my code in my header.php to pull in the menu:

<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>

Here is my code for 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' );

I am also using a script in header.php to make the dropdown work on hover

 <script>
 $(function() {


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

});
</script>

And I'm pulling in jquery and bootstrap.js in my header as such:

<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>

Any help fixing my issues 1-3 at the top of this request would be most appreciated.

William Patton William Patton · Accepted Answer · 2014-07-25T02:37:14

I found this question ranked highly in Google and was surprised that no answer has been provided yet.

The problem here is that the menu button is targeting the wrong element on the page. It's using data-target=".navbar-top-collapse" when it should be targeting the ID #navbarCollapse.

Corrected code to fix point 1 would be:

<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>

Regarding point 2: This is the expected behavior. Clickable links that also open a dropdown menu are not mobile friendly. Ed McIntyre - the maker of the bootstrap navwalker class you've used in this theme, made the conscious decision to adhere to Bootstraps mobile friendly nature and made sure the navwalker makes items with children unlinked. That makes them able to open dropdowns on 'touch' events rather than simply on hover.

Point 3: Changing the collapse size involves making dozens (maybe hundreds) of CSS overrides to Bootstrap's core CSS. Doing it manually is a total pain. If your using LESS then you can simply modify the @grid-float-breakpoint variable. You can also do it via the Bootstrap Customizer if you want.

Problems with WordPress Bootstrap 3 Walker Nav

2 Answers