Title: Custom Mega Menu
Last modified: August 21, 2016
---
# Custom Mega Menu
* [mkampitsch](https://wordpress.org/support/users/mkampitsch/)
* (@mkampitsch)
* [12 years, 9 months ago](https://wordpress.org/support/topic/custom-mega-menu/)
* I’m struggling with wp_nav_menu() to output my menu like this
* ```
```
* I managed to get the `
` with a custom walker in there,
but cannot find a solution to output three equal submenus.
* How do I achieve this?
* Thank you!
Viewing 6 replies - 1 through 6 (of 6 total)
* [wpismypuppet](https://wordpress.org/support/users/wordpressismypuppet/)
* (@wordpressismypuppet)
* [12 years, 9 months ago](https://wordpress.org/support/topic/custom-mega-menu/#post-4052107)
* You’ll probably need a more advanced custom walker… but before I continue, can
you clarify a little more? What do you mean by “three equal submenus”? How do
you want the final output to look and how is it currently looking? What does
your WordPress menu look like in the admin area? The more details you provide(
including a link if at all possible) the easier for us to answer quickly.
* Thread Starter [mkampitsch](https://wordpress.org/support/users/mkampitsch/)
* (@mkampitsch)
* [12 years, 9 months ago](https://wordpress.org/support/topic/custom-mega-menu/#post-4052146)
* Basically you can just add one submenu to each navigation item. What I mean with“
equal submenus” is to group items of those submenus to get multiple parallel
submenus for one navigation item.
* I want the final output to look like in my first post.
* What I achieved right now is this, which is the most final it’ll get I assume
* ```
```
* My menu structur looks like [this ](https://www.dropbox.com/s/cgwgbsb6223hgzn/screen.png)
because I assume without any plugins it would not be possible to group the submenus
to look like [this](https://www.dropbox.com/s/yqh49k5grerqr5l/screen2.png)
* [wpismypuppet](https://wordpress.org/support/users/wordpressismypuppet/)
* (@wordpressismypuppet)
* [12 years, 9 months ago](https://wordpress.org/support/topic/custom-mega-menu/#post-4052159)
* Well yes, it is final in that it is what the function will output, but you can
add code to your custom walker to add more code. In your case, I’m assuming you
want to have columns of ULs floating left, correct?
* What I would do, if I were you… I would add a class of “break” or “col-break”
or something equivalent on your “level two” elements where you want the column
to break. You can add this class where you create the menu itself, in the admin
area. If you don’t see a field for “class”, then open the screen options and
check off the “class” box. Then I would write my custom walker to check each
element for that class and, if found, pump out a:
* `
`
* So where you have code to create your:
* `
`
* Add in the starting div so it looks like this:
* `
`
* Then whenever you find your class, “col-break” on the li, pump out the:
* `
`
* and where you have code to close your “drop-down” div, close the “col”:
* `
`
* Make sense? Then use CSS to float the columns (“col”).
* Thread Starter [mkampitsch](https://wordpress.org/support/users/mkampitsch/)
* (@mkampitsch)
* [12 years, 9 months ago](https://wordpress.org/support/topic/custom-mega-menu/#post-4052164)
* Yeah makes sense. What I’m doing now comes with less code. I don’t use another
column div. I just take `.sub-menu > li’ to float it.
* [JacobTheDev](https://wordpress.org/support/users/revxx14/)
* (@revxx14)
* [12 years, 1 month ago](https://wordpress.org/support/topic/custom-mega-menu/#post-4052360)
* Do you mind sharing the walker you came up with for this? I’ve been struggling
to wrap my first level drop downs in a div for over a week. It’s driving me insane.
* [wpismypuppet](https://wordpress.org/support/users/wordpressismypuppet/)
* (@wordpressismypuppet)
* [12 years, 1 month ago](https://wordpress.org/support/topic/custom-mega-menu/#post-4052361)
* Comments should speak for themselves… 90% of this code is the standard WordPress
walker class… only a few lines have been added. You’ll see those lines between
the comments.
* ```
// Custom walker to allow drop down menus to be in columns
class Column_Walker extends Walker_Nav_Menu {
function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent
";
// Add this piece to start to wrap all the
tags in a
if( $depth == 0 ) {
$output .= "\n$indent
";
}
// End
$output .= "\n";
}
function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
// Add this piece to close the wrap of all the
tags in a
.
// It should be noted that an extra empty
is included to allow for clearing any floated column.
// Feel free to remove '$indent' if you have your own clear method
if( $depth == 0 ) {
$output .= "$indent
\n$indent";
}
// End
$output .= "$indent\n";
}
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 ) . '"';
// This piece checks to see if you added a class of 'col-break' to any menu item in the admin area.
// If you did, it breaks the column and starts a new one BEFORE the item is displayed
if( stripos( $class_names, 'col-break' ) !== false )
$output .= '