Wrap WordPress menu items with Bootstrap html

Question

I am using the WordPress menu widget to generate menu items as follows (using the Bootstrap framework):

<nav class="navbar navbar-toggleable-md">
<div class="container">
    <div class="collapse navbar-collapse" id="navbarNav">
        <?php wp_nav_menu(array('theme_location' => 'header-menu','menu_class' => 'navbar-nav','container' => 'false'));?>
    </div>
</div>
</nav>

I have these functions to add some addtional style:

function add_link_atts($atts) {
    $atts['class'] = "nav-link";
    return $atts;
}

add_filter( 'nav_menu_link_attributes', 'add_link_atts');

Question is ... I would like a div with class col-md-3 to wrap each of my four menu items so they can be laid out into bootstrap columns.

Where would I add the code in wp_nav_menu that should append before and after each menu item?

ie. how to add the <div class="col-md-3"> element before each WordPress menu item, and </div> element after each menu item.

This answer is [here](https://stackoverflow.com/questions/14464505/how-to-add-class-in-li-using-wp-nav-menu-in-wordpress) you can read and add class in menu li. — WPMK Organization, Feb 28 '18 at 07:18
This answer is [here](https://stackoverflow.com/questions/14464505/how-to-add-class-in-li-using-wp-nav-menu-in-wordpress) you can read and add class in menu li. — WPMK Organization, Feb 28 '18 at 07:20

score 0 · Answer 1 · answered Feb 28 '18 at 07:14

I would like a div with class col-md-3 to wrap each of my four menu items so they can be laid out into bootstrap columns.

The Bootstrap navbar is NOT designed and will NOT work with any column classes.
You don't need any column classes for controlling the layout of the navbar elements.

marcizus · Answer 2 · 2022-09-07T09:03:37.633

If I understand question correctly you can achieves this in two steps.

Create custom nav_walker. I found a snippet in other question. This is needed in order to change li tag to div. There we will add bootstrap classes such as "col-md-6".

Here is my snippet.

// Extend nav_walker
class custom_Walker extends Walker_Nav_Menu
{
    function start_el(&$output, $item, $depth, $args)
    {
        $classes = empty($item->classes) ? array () : (array) $item->classes;
        $class_names = join(' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
        !empty ( $class_names ) and $class_names = ' class="col-12 col-md-6 col-lg-4 mb-30 '. esc_attr( $class_names ) . '"';
        $output .= "<div $class_names>";
        $attributes  = '';
        !empty( $item->attr_title ) and $attributes .= ' title="'  . esc_attr( $item->attr_title ) .'"';
        !empty( $item->target ) and $attributes .= ' target="' . esc_attr( $item->target     ) .'"';
        !empty( $item->xfn ) and $attributes .= ' rel="'    . esc_attr( $item->xfn        ) .'"';
        !empty( $item->url ) and $attributes .= ' href="'   . esc_attr( $item->url        ) .'"';
        $title = apply_filters( 'the_title', $item->title, $item->ID );
        $item_output = $args->before
        . "<a $attributes>"
        . $args->link_before
        . $title
        . '</a></div>'
        . $args->link_after
        . $args->after;
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

Then in your template file (or where you want to show menu) use wp_nav_menu(). In here you can play around with an array. I only needed to add row class because my template already had container class element before.

 wp_nav_menu( array(
    'theme_location' => 'custom_menu_location',
     'container'            => 'div',
     'container_class'      => 'container-class',
     'menu_class'           => 'row justify-content-center',
     'fallback_cb'          => false,
     'items_wrap'           => '%3$s',
     'depth'                => 1,
     'walker'               => new custom_Walker 
 ));

Wrap WordPress menu items with Bootstrap html

2 Answers2