Bootstrap navbar menu integrated in WordPress issue

1 Views

I have recently started learning how to use WordPress, and I have selected a simple theme and want to implement the bootstrap navbar fixed-top menu.

I have so far succeed, and have the menu working when the screen is in full mode, and loads in the correct primary menu.

Read More

However, I need help with a couple things.

  • Firstly, I have the navbar set so when you hover over a Dropdown, it auto dropdowns the sub menu, but I would like the parent link to be clickable to it’s relevant page also
  • In standard HTML & CSS, this is simple to do, but in WordPress, when you load in the menu I find it a bit more complex.

Here is how I have input the navbar within the header.php file: 

<div class="navbar navbar-inverse navbar-fixed-top">
    <?php
    // Fix menu overlap bug..
    if ( is_admin_bar_showing() ) echo '<div style="min-height: 28px;"></div>';
    ?>
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/"><?php echo esc_attr( get_bloginfo( 'name' ) ); ?></a>
        </div>
            <?php
            wp_nav_menu( array(
            'menu'              => 'primary-menu',
            'theme_location'    => 'primary-menu',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'navbar-collapse collapse',
            'container_id'      => 'bs-example-navbar-collapse-1',
            'menu_class'        => 'nav navbar-nav',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
            'walker'            => new wp_bootstrap_navwalker())
            );
        ?>
    </div>
</div>

As you can see that the primary menu is loaded in with some PHP. The issue with this is, it does not allow for me to change the a class="" on a Link so I can input disable, so it can be clicked as a Link.

Also the Link is currently ‘#’ which I cannot change.

Lastly, when I resize my browser to check if the menu is responsive, when the toggle button displays, I click that and it shows the links, once I hover over the link with a sub menu it again auto drops down (which is not what I want when the responsive toggle menu is displayed). I want to click the link when the menu is shrunk down, rather than auto dropdown on full view.

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. If you want to make the Parent Link clickable you need to edit the wp_bootstrap_navwalker.php.

    I have done this before by editing some lines within the wp_bootstrap_navwalker.phpfile and here’s how.

    First fine this line of code:

    $atts = array();
$atts['title']  = ! empty( $item->title )   ? $item->title  : '';
$atts['target'] = ! empty( $item->target )  ? $item->target : '';
$atts['rel']    = ! empty( $item->xfn )     ? $item->xfn    : '';
// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
    $atts['href']           = '#';
    $atts['data-toggle']    = 'dropdown';
  $atts['class']          = 'dropdown-toggle';
    $atts['aria-haspopup']  = 'true';
} else {
    $atts['href'] = ! empty( $item->url ) ? $item->url : '';
}

    These lines of code are normally around line 78 to line 91 what you can do is replace all of the lines above with these lines of code:

    $atts['title']  = ! empty( $item->title )   ? $item->title  : '';
$atts['target'] = ! empty( $item->target )  ? $item->target : '';
$atts['rel']    = ! empty( $item->xfn )     ? $item->xfn    : '';
// If item has_children add atts to a.
// if ( $args->has_children && $depth === 0 ) {
if ( $args->has_children ) {
    $atts['href'] = $item->url;
    $atts['data-toggle']    = 'dropdown';
    $atts['class']          = 'dropdown-toggle';
} else {
    $atts['href'] = ! empty( $item->url ) ? $item->url : '';
}

    What I have done here is I have changed the parent link to print its own link instead of replacing it with a #

    $atts['href'] = $item->url;

    Instead of the original which was to change the parent link to a #

    $atts['href'] = '#';