how to add class to certain li element in wp_nav_menu

Question

i'm trying to add a class to the li elements in my wordpress wp_nav_menu. I followed a couple of answer on here but can only get part of it working. So for my nav menu, i have >

functions.php >

//REGISTER NAVIGATION MENU
function smtg_menus() {
  register_nav_menus(
    array(
      'header-menu' => __( 'Header Menu' ),
      'footer-menu' => __( 'Footer Menu' )
    )
  );
}
add_action( 'init', 'smtg_menus' );

This code adds nav-links-dropdown class to the drop down menu on categories.

function my_nav_menu_submenu_css_class( $classes ) {
    $classes[] = 'nav-links-dropdown';
    return $classes;
}
add_filter( 'nav_menu_submenu_css_class', 'my_nav_menu_submenu_css_class' );

Header.php >

$args = array(
    'theme_location'  => 'header-menu',
    'container'       => 'nav',
    'container_class' => '',
    'container_id'    => '',
    'menu_class'      => '',
    'menu_id'         => '',
    'fallback_cb'     => false );
wp_nav_menu( $args );

I have a total of 4 li elements in my main navigation, with only one of those li elements having a sub menu, aka dropdown.

I can't figure out how to add a class to the li that has a drop down in order to trigger the drop down menu.

Looking at the page source, i see >

<!-- START NAV INSIDE NAV BAR -->
<nav class="menu-header-menu-container">
    <ul id="menu-header-menu" class="">
        <li><a href="#">Home</a></li>
        <li><a href="#">Categories</a>
            <ul  class="sub-menu nav-links-dropdown">
                <li><a href="#">Cat1</a></li>
                <li><a href="#">cat2</a></li>
                <li><a href="#">cat3</a></li>
                <li><a href="#">cat4</a></li>
                <li><a href="#">cat5</a></li>
                <li><a href="#">cat6</a></li>
            </ul>
        </li>
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
    </ul>
</nav>

On the second LI element - I need to add the class cats-li-dropdown to it in order to display the drop down menu. I can't seem to figure out how to do this in php anywhere.

Right now I'm using jquery to add the class cats-li-dropdown to the 2nd element like so.

$('nav li:nth-child(2)').addClass('cats-li-dropdown');

How can I avoid having to use jquery to add a class to the second li element?

I already tried adding the class in wordpress in the menu options but it still comes out blank when i look at the page source.

This added nothing to the li element, even though it seems it should. Any other ideas?

do you have the page with the wordpress menu that you are working on? It seems odd that the CSS classes isn't working for you. Also have you included wp_head() and wp_footer() in your wordpress template? — Vincent1989, Oct 09 '17 at 02:18
Right now I have 4 pages. Home. Categories. Info. Contact. In my header.php I have wp_head and in my footer.php I have wp_footer. My enqueued scripts and styles are working 100% in my functions.php file. I'm stumped on why when even adding the css class for the page as seen in the picture, it won't actually add it in the generated code. Hmmm. — grimesd, Oct 09 '17 at 02:44
It might be another nasty glitch from your wordpress version, anyhow I found a way to add custom css to submenu https://stackoverflow.com/questions/5034826/wp-nav-menu-change-sub-menu-class-name — Vincent1989, Oct 09 '17 at 03:45
Thank you for the link, it seems this only adds a class to the drop down menu itself, I have that down. Just having trouble adding class to the 2nd LI element in nav to actually trigger the dropdown. Right now I'm using nav li:nth-child(2):hover .nav-links-dropdown { display: block; } , to display the dropdown, surprised this simple thing is not working in wordpress — grimesd, Oct 10 '17 at 00:25

score 0 · Answer 1 · answered Oct 09 '17 at 03:59

0

For the custom css classes not showing issue, try adding menu parameter:

$args = array(
    'menu'  => 'header-menu',
    'theme_location'  => 'header-menu',
    'container'       => 'nav',
    'container_class' => '',
    'container_id'    => '',
    'menu_class'      => '',
    'menu_id'         => '',
    'fallback_cb'     => false );
wp_nav_menu( $args );

answered Oct 09 '17 at 03:59

Vincent1989

1,593
2
13
25

I tried add menu > location to the args, and when viewing the page source, it still does not add the class that I entered into the menu class option in wp-admin. for now I'm using nav li:nth-child(2):hover .nav-links-dropdown { display: block; } – grimesd Oct 10 '17 at 00:23

how to add class to certain li element in wp_nav_menu

1 Answers1