I created an extended Walker menu that adds additional divs inside of the <a></a> tags within the menu. When the divs are added the accordion no longer works. I located the file rmp-menu.js within the Responsive Menu plugin, but cannot locate the jquery code that is conflicting with additional divs that have been added.

Can you provide some direction?

-Test
–Subtest <— Looking to only wrap the container around this levels children
—Subsubtest
—Subsubtest 2
–Subtest 2
-Test 2
–Subtest <— Looking to only wrap the container around this levels children
— Subsubtest
-Test 3

So anything that has both parent and children.

<pre><code>class OBE_Mega_Sub_Menu extends Walker_Nav_Menu
{
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat(&quot;\t&quot;, $depth);
		// $classes = $args->
		$link_depth = $args->depth;
		if($args->walker->depth && $depth == 1) {
			$output .= &quot;\n$indent<div class='container'><div class='sub-menu-holder flex flex-column'>\n&quot;;
		} else {
			$output .= &quot;\n$indent<ul class='sub-menu' data-slide><div class='container $depth $link_depth'><div class='sub-menu-holder'>\n&quot;;
		}
       
    }
    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat(&quot;\t&quot;, $depth);
		$link_depth = $args->depth;
		if($args->walker->depth && $depth == 1) {
			$output .= &quot;$indent</div></div>\n&quot;;
		} else {
			$output .= &quot;$indent</div></div></ul>\n&quot;;
		}
        
    }
}

</code></pre>

I’ve tried a few combinations but it always goes to the else.

The output I’m looking for is:

<nav class="nav">
    <ul>
        <li>
            <a href="#">Campers<span class="js-trigger-dropdown"><i class="fas fa-sort-down"></i></span></a>
            <div class="dropdown">
                <ul>
                    <li>
                        <a href="#">
                            <div class="dropdown__image"><img src="assets/images/temp/dropdown-img-1@2x.png" alt=""></div>                                          
                            <div class="dropdown__content">
                                <h6>Volkswagen T2b</h6>                                         
                                <p>Rood</p>
                            </div>
                        </a>
                    </li>                   
                </ul>
            </div>
        </li>
        <li><a href="#">Over evan</a></li>      
        <li><a href="#">Blog</a></li>       
        <li>
            <a href="#">
                Help<span class="js-trigger-dropdown"><i class="fas fa-sort-down"></i></span>
            </a>
            <div class="dropdown dropdown--secondary">
                <ul>
                    <li><i class="fas fa-arrow-right"></i><a href="#">Contact</a></li>
                    <li><i class="fas fa-arrow-right"></i><a href="#">Routebeschrijving</a></li>
                    <li><i class="fas fa-arrow-right"></i><a href="#">FAQ</a></li>
                </ul>
            </div>
        </li>
    </ul>
</nav>

You can see that the two submenu levels have a slightly different output.

The Walker class i’m currently working with is:

class CSS_Menu_Maker_Walker extends Walker {

  var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' );

  function start_lvl( &$output, $depth = 0, $args = array(), $top_level_elements = array() ) {

    $indent = str_repeat( "\t", $depth );
    if ($args->walker->has_children) {
        $output .= "\n$indent<div class=\"dropdown\"><ul>\n";
    } else {
        $output .= "\n$indent<ul>\n";
    }

  }

  function end_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);

    if ($args->walker->has_children) {
        $output .= "$indent</div></ul>\n";      
    } else {
        $output .= "$indent</ul>\n";
    }
    
  }

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

    global $wp_query;
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
    $class_names = $value = '';        
    $classes = empty( $item->classes ) ? array() : (array) $item->classes;

    /* Add active class */
    if(in_array('current-menu-item', $classes)) {
      $classes[] = 'active';
      unset($classes['current-menu-item']);
    }

    /* Check for children */
    $children = get_posts(array('post_type' => 'nav_menu_item', 'nopaging' => true, 'numberposts' => 1, 'meta_key' => '_menu_item_menu_item_parent', 'meta_value' => $item->ID));
    if (!empty($children)) {
      $classes[] = 'has-sub';
    }

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

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

    $output .= $indent . '<li' . $class_names .'>';

    $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        ) .'"' : '';

    $item_output = $args->before;
    $item_output .= '<a'. $attributes .'>';    
    $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
    if ($args->walker->has_children) {
        $item_output .= '<span class="js-trigger-dropdown"><i class="fas fa-sort-down"></i></span></a>';
    } else {
        $item_output .= '</a>';
    }

    $item_output .= $args->after;

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

  function end_el( &$output, $item, $depth = 0, $args = array() ) {
    $output .= "</li>\n";
  }
}

Looking forward to getting some help

* To override this walker in a child theme without modifying the comments template simply create your own astra_theme_comment(), and that function will be used instead.

Can you provide a simple example of how we can create our own astra_theme_comment() function? Just trying to get my feet wet beyond the text mentioned above. Here’s what I am trying to look for…

– How do we initiate that function?
– Should that initiation process occur in functons.php, within our child theme?
– Does it need to, or can it tie to, a hook or a do_action()?
– Can we pass any arguments into it?
– What would be an example of something to use inside of it?

If Menu detected a conflict with another plugin or theme (Bridge_Qode_Walker_Nav_Menu_Edit_Custom) and may not work as expected.

I have issued a support ticket with my Theme provider as it seems like it’s conflicting with something on their end, but they don’t usually like to help with 3rd party plugins.

Any way I can fix this?

It seems as though when Max Mega Menu is active, the start_lvl() and start_el() methods are never fired. If I disable the plugin, I see my custom walker code being executed, but when it’s enabled, it gets bypassed entirely.

Is there some reason for this, and what do you recommend as an alternative to overriding the Walker_Nav_Menu class methods?

PHP Warning: Declaration of Custom_Menu_Wizard_Sorter::walk($elements, $max_depth = 0) should be compatible with Walker::walk($elements, $max_depth, …$args) in /wp-content/plugins/custom-menu-wizard/include/class.sorter.php

PHP Warning: Declaration of Custom_Menu_Wizard_Walker::walk($elements, $max_depth) should be compatible with Walker::walk($elements, $max_depth, …$args) in /wp-content/plugins/custom-menu-wizard/include/class.walker.php

Looks like this solves it:
class.walker.php line 55
public function walk( $elements, $max_depth, …$args ){

class.sorter.php line 60
public function walk( $elements, $max_depth = 0, …$args ) {

//NB : any orphan elements (and that includes children of orphans) get appended to the
// output array in the order that they are placed in the original array (ie. regardless
// of menu_order) BUT *only* if $max_depth is zero! If $max_depth is anything other than
// zero then all orphans (and their children) are ignored (ie. discarded).
$output = parent::walk( $elements, $max_depth, …$args );

//always return an array…
return is_array( $output ) ? $output : array();

}

Any suggestions?