Bootstrap drop down menu with wp_nav_menu

I am trying to build a WordPress theme with boostrap, but the nav menu is giving me some trouble. I would like the dropdown to work like boostraps dropdown, but I do not know how to do this.

This is my menu:

<ul class="nav">
   <?php wp_nav_menu( array( 'items_wrap' => '%3$s' ) ); ?>
</ul>

This is what I have in my functions.php for the menu:

add_action('after_setup_theme', 'blankslate_setup');
function blankslate_setup(){
register_nav_menus(
array( 'main-menu' => __( 'Main Menu', 'blankslate' ) )
);
}

function my_wp_nav_menu_args( $args = '' )
{
    $args['container'] = false;
    return $args;
} // function

add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );

When I add a submenu item (via Appearance – Menus) this is what is currently generated:

<ul class="nav">
    <li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Parent</a>
        <ul class="sub-menu">
                <li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Child</a></li>
        </ul>
    </li>
</ul>

For my menu to work with bootstrap I need the menu to be generated like:

<ul class="nav">
    <li class="dropdown"><a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" class="dropdown-toggle" data-toggle="dropdown">Parent <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Child</a></li>
        </ul>
    </li>
</ul>

So I need:

To add the class “dropdown”, if a menu-item has child-items.
To add class=”dropdown-toggle” data-toggle=”dropdown” to the .dropdown
a element
To add <b class="caret"></b> after the Dropdown-menu name (inside the .dropdown a element)
To add class="dropdown-menu" to <ul class="sub-menu">

Hope someone can help!

Contents hide

Answers:

Method 1

Method 2

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You will need to write a custom walker extending Walker_Nav_Menu, more or less like so:

class My_Custom_Nav_Walker extends Walker_Nav_Menu {

   function start_lvl(&$output, $depth = 0, $args = array()) {
      $output .= "n<ul class="dropdown-menu">n";
   }

   function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
       $item_html = '';
       parent::start_el($item_html, $item, $depth, $args);

       if ( $item->is_dropdown && $depth === 0 ) {
           $item_html = str_replace( '<a', '<a class="dropdown-toggle" data-toggle="dropdown"', $item_html );
           $item_html = str_replace( '</a>', ' <b class="caret"></b></a>', $item_html );
       }

       $output .= $item_html;
    }

    function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
        if ( $element->current )
        $element->classes[] = 'active';

        $element->is_dropdown = !empty( $children_elements[$element->ID] );

        if ( $element->is_dropdown ) {
            if ( $depth === 0 ) {
                $element->classes[] = 'dropdown';
            } elseif ( $depth === 1 ) {
                // Extra level of dropdown menu, 
                // as seen in http://twitter.github.com/bootstrap/components.html#dropdowns
                $element->classes[] = 'dropdown-submenu';
            }
        }

    parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
    }
}

Not sure of what you need with points 3 and 4, though.

Method 2

To fix the dropdown menu problem you should:

go to class-wp-bootstrap-navwalker.php file

look for

$atts['data-toggle'] ="dropdown";

and replace it with

$atts['data-bs-toggle'] ="dropdown";

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating