1

I am working on building a custom mega menu within Wordpress.I am running into an issue with unwanted elements being displayed from wp_nav_menu which are distorting my menu.

<?php
    wp_nav_menu( array(
       'theme_location' => 'main-menu',
       'menu_id'            => 'primary-menu',
       'items_wrap'     => '<ul class="nav-menu row">%3$s</ul>',
       'walker'         => new custom_menu,
       'container'         => 'false',
       'menu_class'        => 'false',
    ) );
 ?>

I am calling a custom walker so I can display certain div and order list, which is the following:

class custom_menu extends Walker_Nav_Menu {
function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul><div class=\"container\">\n";
}
function end_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "$indent</ul></div>\n";
}
}
 add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);
 add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);
 add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);
 function my_css_attributes_filter($var) {
   return is_array($var) ? array_intersect($var, array('sub-menu-columns')) : '';
}

and below is the HTML it is displaying. I also marketed the elements I need to remove.

 <div class="menu">
    <ul class="nav-menu row">
        <li><a href="http://dccollegenew.wpengine.com/admission-aspx/">Admissions and Aid</a>
            <ul>
                <li style="list-style: none; display: inline"><!-- REMOVE -->
                    <div class="container">
                        <ul><!-- REMOVE -->
                            <li><h2>Admissions</h2>
                                <div class="menu-admissions-delivery-systems-container"><!-- REMOVE -->
                                    <ul class="menu" id="menu-admissions-delivery-systems"><!-- REMOVE CLASS AND ID-->
                                        <li><a href="http://dccollegenew.wpengine.com/freshmen-admissions/">Freshmen Admissions</a></li>
                                        <li><a href="http://dccollegenew.wpengine.com/transfer/">Transfer Admissions</a></li>
                                        <li><a href="http://dccollegenew.wpengine.com/online-courses/">Online Programs</a></li>
                                        <li><a href="http://dccollegenew.wpengine.com/adult-programs/">Adult Students</a></li>
                                        <li><a href="http://dccollegenew.wpengine.com/graduate-admissions/">Graduate Admissions</a></li>
                                        <li><a href="http://dccollegenew.wpengine.com/international-students/">International Students</a></li>
                                        <li><a href="http://dccollegenew.wpengine.com/admissions/financial-aid-2/veterans/">Veterans and Military Students</a></li>
                                    </ul>
                                </div><!-- REMOVE -->
                            </li>
                            <li>
                                <h2>Financial Aid</h2>
                                <div class="menu-admissions-financial-aid-container"><!-- REMOVE -->
                                    <ul class="menu" id="menu-admissions-financial-aid"><!-- REMOVE CLASS AND ID-->
                                        <li><a href="http://dccollegenew.wpengine.com/admissions/financial-aid-2/">Financial Aid</a></li>
                                        <li><a href="http://dccollegenew.wpengine.com/admissions/financial-aid-2/scholarship-financial-aid-options/">Scholarship and Financial Aid Options</a></li>
                                        <li><a href="http://dccollegenew.wpengine.com/admissions/financial-aid-2/financial-aid-forms/">Financial Aid Forms</a></li>
                                        <li><a href="http://dccollegenew.wpengine.com/admissions/financial-aid-2/contact-financial-aid-counselor/">Contact a Financial Aid Counselor</a></li>
                                        <li><a href="http://dccollegenew.wpengine.com/admissions/financial-aid-2/net-price-calculator/">Net Price Calculator</a></li>
                                    </ul>
                                </div><!-- REMOVE -->
                            </li>
                        </ul><!-- REMOVE -->
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>

This is how the menu should display

 <section class="bottom-header container-fluid">
 <div class="menu">
    <ul class="clearfix nav-menu">
        <li><a href="#">Admissions and Aid</a>
            <ul>
                <div class="container">
                    <li><h2>School</h2>
                        <ul>
                            <li><a href="#">Lidership</a></li>
                            <li><a href="#">History</a></li>
                            <li><a href="#">Locations</a></li>
                            <li><a href="#">Careers</a></li>
                        </ul>
                    </li>
                    <li><h2>School</h2>
                        <ul>
                            <li><a href="#">Undergraduate</a></li>
                            <li><a href="#">Masters</a></li>
                            <li><a href="#">International</a></li>
                            <li><a href="#">Online</a></li>
                        </ul>
                    </li>
                    <li><h2>School</h2>
                        <ul>
                            <li><a href="#">Undergraduate research</a></li>
                            <li><a href="#">Masters research</a></li>
                            <li><a href="#">Funding</a></li>
                        </ul>
                    </li>
                    <li><h2>School</h2>
                        <ul>
                            <li><a href="#">Undergraduate research</a></li>
                            <li><a href="#">Masters research</a></li>
                            <li><a href="#">Funding</a></li>
                        </ul>
                    </li>
                </div>
            </ul>
        </li>
        <li><a href="#">Academics</a></li>
        <li><a href="#">Student Life</a></li>               
        <li><a href="#">Athletics</a></li>  
        <li><a href="#">Alumni</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Support The College</a></li>
    </ul>
 </div>
 </section>

No matter what I do I can't seem to remove those items I have labeled remove. Any help would be greatly appreciated.

1 Answer 1

0

I got it to work by reconfiguring the walker

 class custom_menu extends Walker_Nav_Menu {
   function start_el(&$output, $item, $depth, $args) {
    global $wp_query;
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

    $class_names = $value = '';

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

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

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

    $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;
    $item_output .= '</a>';
    $item_output .= $args->after;

    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul><div class=\"container\">\n";
  }
 }
  add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);
  add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);
  add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);
    function my_css_attributes_filter($var) {
    return is_array($var) ? array_intersect($var, array('sub-menu-columns'))    : '';
 }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.