Add a div container in sub menu in wordpress nav menu

We need to use custom, extend two methods start_lvl() and end_lvl().

class WPSE_78121_Sublevel_Walker extends Walker_Nav_Menu
function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<div class='sm-container'><ul class='sub-menu'>\n";
function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</ul></div>\n";

Now place in argument in our wp_nav_menu function

array (
'theme_location' => 'your-theme-location-EDIT-THIS',
'walker' => new WPSE_78121_Sublevel_Walker

We can also add container using jquery


jQuery( document ).ready(function( ) {
jQuery('nav .megamenu').find('ul.sub-menu').first().wrap('<div class="sm-container" />');


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s