Applying CSS on Submenu on wp_nav_menu in WordPress

👨‍👩‍👧‍👦 Community
1

I have the following html on my menu section:

<nav class="navigation">
  <ul>
    <li class="active-menu">Home</li>
    <li>About
      <ul class="submenu>
         <li class="sub-item">Our History</li>
         <li class="sub-item">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.

2

I am not 100% sure but I dont think you can manage your active classes on wordpress side. This is something you have to do in your frontity theme.

You can check here, how they do it in the mars theme: frontity/nav.js at dev · frontity/frontity · GitHub
You can do the same logic they are doing for the aria attribute but for your classes.

Also, if you haven’t already, please check this discussion to see how menus are managed.

Youtube: Frontity Talks 2021-01 - Fetching menus from WordPress - YouTube
Community discussion: How to fetch Menu from wordpress? - #101 by mburridge

Good luck