WordPress Nav Walker - Top menu link with dropdown link not clickable (dropdown opens)

Question

I'm trying to setup a WP NAV WALKER with dropdowns. The links work fine, the dropdowns work fine, however the parents of dropdowns should also have links, but they don't trigger, instead, they just open the dropdowns. The goal would be that the arrows open the dropdowns, and clicking on the a tag results in the parent page opening.

Code:

class Walker_Nav_primary extends Walker_Nav_menu {


    function start_lvl( &$output, $depth = 0, $args = array() ) {
        // ul
        $indent  = str_repeat( "\t", $depth );
        $submenu = ( $depth > 0 ) ? ' sub-menu' : '';
        $output .= "\n$indent<ul class=\"dropdown-menu$submenu depth_$depth\">\n";
    }

    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        // li a span

        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

        $li_attributes = '';
        $class_names   = $value = '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;

        $classes[] = ( $args->walker->has_children ) ? 'dropdown' : '';
        $classes[] = ( $item->current || $item->current_item_ancestor ) ? 'active' : '';
        $classes[] = 'menu-item-' . $item->ID;
        if ( $depth && $args->walker->has_children ) {
            $classes[] = 'dropdown-submenu';
        }

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
        $class_names = ' class="' . esc_attr( $class_names ) . '"';

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args );
        $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';

        $output .= $indent . '<li' . $id . $value . $class_names . $li_attributes . '>';

        $attributes  = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) . '"' : '';
        $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) . '"' : '';
        $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) . '"' : '';
        $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) . '"' : '';

        $attributes .= ( $args->walker->has_children ) ? ' class="dropdown-toggle" data-toggle="dropdown"' : ''; // THE PROBLEM!



        $item_output  = $args->before;
        $item_output .= '<a' . $attributes . '>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= ( $depth == 0 && $args->walker->has_children ) ? ' <b class="caret"></b></a>' : '</a>';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );

    }

}

I was able to narrow down the issue to this line:

$attributes .= ( $args->walker->has_children ) ? ' class="dropdown-toggle" data-toggle="dropdown"' : '';

If I remove it, then the parent links work, however, the dropdowns don't.

Anyone have any ideas?

Wp_nav_menu code:

        wp_nav_menu(
            array(
                'theme_location'  => 'primary-menu',
                'container_class' => false,
                'menu_class'      => 'sidebar-list nav navbar-nav navbar-right',
                'depth'           => 0,
                'falback_cb'      => false,
                'add_li_class'    => 'sidebar-item sidebar-anchor',
                'walker'          => new Walker_Nav_primary(),

            )
        );

Thanks!

Answer 1

Managed to fix it by updating the following:

$attributes .= ( $args->walker->has_children ) ? ' class="dropdown-toggle" data-toggle="dropdown"' : ''; // THE PROBLEM!

to:

$attributes .= ( $args->walker->has_children ) ? ' ' : ''; // THE PROBLEM!

And the fourth $item_output to:

$item_output .= ( $depth == 0 && $args->walker->has_children ) ? ' </a><b class="caret dropdown-toggle" data-toggle="dropdown"></b>' : '</a>';

Combined this with the following jQuery:

jQuery(document).ready(function () {
  jQuery(".dropdown > a").click(function () {
    window.location = jQuery(this).attr("href");
  });

 
});

It does the trick. Probably not the best way, but it works. Hipp-hipp.