Wordpress nav menu add div before ul

3
votes

I have some problems with nav menu in Wordpress. I have a nav-menu

<nav id="nav-menu">
<ul>
</ul>
</nav>

now I want add a div before and after ul:

<nav id="nav-menu">
<div></div>
<ul>
</ul>
<div></div>
</nav>

I've tried several hours but can't found the solution. Can anyone help me with this, thank you. I don't want to just display <ul></ul> by wp_nav_menu() and put HTML code <nav> and <div> before wp_nav_menu().

2
phpwordpressmenu
Please let me know if that was helpful – Pmpr

2 Answers

2
votes

I know this is 3 years old, but you can do exactly what you say, in wp_nav_menu set the items_wrap attribute:

wp_nav_menu( 
    array(
        'theme_location'  => 'menu',
        'items_wrap' => '<div class="div-inserted-inside-wrapper-before-ul">New div inserted</div><ul id="%1$s" class="%2$s">%3$s</ul>'
    )
);

So this extra has been included in items_wrap:

<div class="div-inserted-inside-wrapper-before-ul">New div inserted</div>

btw the default for items_wrap is:

wp_nav_menu( 
    array(
        'theme_location'  => 'menu',
        'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>'
    )
);

That will end up with html output like this (a custom div inside wrapping div, before menu ul):

<div id="menu-wrapper" class="menu-wrapper">
    <div class="div-inserted-inside-wrapper-before-ul">New div inserted</div>
    <ul id="menu" class="menu">
        <li class="menu-item">
            <a title="Menu Item" href="#">Menu Item</a>
        </li>
        ...
    </ul>
</div>
0
votes

simply add this to your theme's functions.php file:

add_filter( 'wp_nav_menu_items', 'prefix_add_div', 10, 2 );

function prefix_add_div( $items, $args ) {
    $items = '<div></div>' . $items . '<div></div>';
    return $items;
}