wordpresswp-nav-walker

I want to add class for the parents li in wordpress walker navigation , not to sub li


Below is the navigation structure that I want to add the class of hvr-bounce-to-bottom to only the parent li . can anybody help me out. below i php and html code everything is ok only the parent class is not adding

<div id="cssmenu">
            <ul>
                <li class="active hvr-bounce-to-bottom"><a href="index.html">Home</a>
                </li>
                <li class="hvr-bounce-to-bottom"><a href="social.html">Social Media</a>
                </li>
                <li class="hvr-bounce-to-bottom"><a href="animation.html">Animated Videos</a>
                </li>
                <li class="hvr-bounce-to-bottom"><a href="webdesign.html">Web Development</a>
                </li>
                <li class="hvr-bounce-to-bottom dropdown"><a href="writing.html">Content Writing </a>
                    <ul class="dropdown">
                        <li><a href="#">Test one</a></li>
                        <li><a href="#">Test one</a></li>
                        <li><a href="#">Test one</a></li>
                        <li><a href="#">Test one</a></li>

                    </ul>
                </li>
                <li class="hvr-bounce-to-bottom"><a href="translation.html">Translation</a>
                </li>
                <li class="hvr-bounce-to-bottom"><a href="portfolio.html">Portfolio </a>
                </li>
            </ul>
        </div>

<?php
        wp_nav_menu( array(
            'menu'              => 'Main Menu',
            'theme_location'    => 'primary',
            'depth'             => 2,
            'container'         => 'div',
            'container_id'      => 'cssmenu',
            'menu_class'      => 'menu-li',
            'items_wrap'      => '<ul>%3$s</ul>',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
            'walker'            => new wp_bootstrap_navwalker())
        );
    ?>

Solution

  • You will have to edit your walker to achieve this. Inside wp-bootstrap-navwalker.php search for the following line:

    $classes[] = 'menu-item-' . $item->ID;
    

    And add this line right after it:

    if ( $depth === 0 ) $classes[] = 'hvr-bounce-to-bottom';
    

    This will add the hvr-bounce-to-bottom class to any li element that is not a sub-menu item (has a menu depth of 0).