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

How do I add class of dropdown to wp_nav_menu() function – WordPress

How do I add class of dropdown in a class wrap by li – <li class="dropdown"> in a wp_nav_menu function?

My static menu

<ul>
<li>
<a href="#hero">Home</a></li>
      <li><a href="blog.html">Blog</a></li>
      <li class="dropdown"><a href="#"><span>Drop Down</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a>
        <ul>
          <li><a href="#">Drop Down 1</a></li>
          <li class="dropdown"><a href="#"><span>Deep Drop Down</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a>
            <ul>
              <li><a href="#">Deep Drop Down 1</a></li>
            </ul>
          </li>
          <li><a href="#">Drop Down 2</a></li>
        </ul>
      </li>
</ul>

I have this dynamic nav menu function,

<?php
if ( has_nav_menu( 'main-menu' ) ) :
    wp_nav_menu( array(
        'theme_location' => 'main-menu',
        'items_wrap'     => '%3$s',
        'add_li_class'   => '',
        'container' => ''
    ));
endif;
?>

How do I make my static menu dynamic with a dropdown in wordpress wp_nav_menu function?

Tags:

2

Answers


  1. 0

    You have 2 options.

    You can add the custom class in the wordpress backend.
    https://sevenspark.com/how-to/how-to-add-a-custom-class-to-a-wordpress-menu-item

    Or you can use this custom php code in your functions.php

    function add_menu_item_class( $classes, $item ) {       
    $classes[] = YOURCLASSNAME;
    return $classes;
} 

add_filter( 'nav_menu_css_class' , 'add_menu_item_class' , 10, 2 );
    Login or Signup to reply.
  2. 0

    You can use this

    if ( has_nav_menu( 'main-menu' ) ) :
    wp_nav_menu( array(
        'theme_location' => 'main-menu',
        'items_wrap'     => '%3$s',
        'menu_class'   => 'menu_class_name', // (string) CSS class to use for the ul element which forms the menu. Default 'menu'. and you can use .menu_class_name li {} for css
        'container' => '' 
    ));
endif;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search