Question 30804 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Applying CSS on Submenu on wp_nav_menu in WordPress

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.

Tags:

2

Answers


  1. 0 
    <?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’.

    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search