Applying CSS on Submenu on wp_nav_menu in WordPress-CodePudding

I have the following html on my menu section:

<nav >
  <ul>
    <li >Home</li>
    <li>About
      <ul sub-item">Our History</li>
         <li >Our Goal</li>
      </ul>
    </li>
    <li>Contact</li>
  </ul>
</nav>

Now I am planning to add 2 things here: one is the active-menu class if the item click is the active one and then add classes namely submenu and sub-item to the submenu that were set at the WordPress Menu Dasbhoard.

So far I have the following code:

 <?php wp_nav_menu(array(
       'theme_location' => 'headerMenuLocation'
  )); ?>

How do I customize my wp_nav_menu in order to add these classes?

Thank you in advance.

CodePudding user response：

<?php 
    wp_nav_menu(                  
                array(                                
                         'theme_location' => 'headerMenuLocation',
                         'menu'           => false,
                         'container'      => 'ul',
                         'menu_class'  => 'navbar-nav',                                      
                               
                                )                   
                   );
                   ?>

you have to add your customize clsses in 'menu_class'.

CodePudding user response：

You can use the add_filter function for class add to li tag

add_filter ( 'nav_menu_css_class', 'so_37823371_menu_item_class', 10, 4 );

function so_37823371_menu_item_class ( $classes, $item, $args, $depth ){
  $classes[] = 'sub-item';
  return $classes;
}