How do I give class to the dropdown sub-menu in the wp_nav_menu?

by

This is my html code

<div class="section__main-nav" id="section__main-nav-id">
            <div class="container">
                <nav class="navbar navbar-toggleable-md navbar-light">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbarToggler" aria-controls="main-navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="main-navbarToggler">
                        <ul class="nav navbar-nav">
                            <li class="nav-item active">
                                <a class="nav-link" href="https://wordpress.stackexchange.com/questions/300573/index.html">Home<span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item dropdown">    
                                <a href="shop.html" class="nav-link dropdown-toggle dropdown-hover" data-toggle="dropdown">Shop</a>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Hoddie</a>
                                    <a class="dropdown-item" href="#">Long Sleeve Tees</a>
                                    <a class="dropdown-item" href="#">Short Sleeve Tees</a>
                                    <a class="dropdown-item" href="#">Tank Top</a>
                                    <a class="dropdown-item" href="#">Jumper</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item color-primary" href="shop.html">See All</a>
                                </div>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="about.html">About Us</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="contact.html">Contact Us</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>

and I have converted it to my wordpress 

<div class="section__main-nav" id="section__main-nav-id">
            <div class="container">
                <nav class="navbar navbar-toggleable-md navbar-light">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbarToggler" aria-controls="main-navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <?php 

                        wp_nav_menu( array(
                            'theme_location'    => 'primary',
                            'container'         => 'div',
                            'container_class'   => 'collapse navbar-collapse',
                            'container_id'      => 'main-navbarToggler',
                            'menu_class'        => 'nav navbar-nav'
                        ) );

                     ?>
                </nav>
            </div>
        </div>

how can I give the class of the dropdowns in the wordpress code

1 Answer
1

You can use Walker_Nav_Menu (WordPress Default class).

Here is an example –

In header.php file – 

<nav id="header-menu">
<?php
  wp_nav_menu( array(
    'theme_location' => 'primary',
    'walker'  => new Child_Wrap()   
   ) );
?>
</nav>

In my functions.php file – 

class Child_Wrap extends Walker_Nav_Menu
{
    function start_lvl(&$output, $depth = 0, $args = array())
    {
        $indent = str_repeat("\t", $depth);
        $output .= "\n<div class="sub-menu-holder">$indent<ul class=\"drop-down\">\n";
    }

    function end_lvl(&$output, $depth = 0, $args = array())
    {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul></div>\n";
    }
}

Above is an example of my code you can change as per your requirement.
Thanks.

Leave a Comment