Support » Fixing WordPress » wp nav menu with custom class for each li

  • Heya,

    Been reading about this topic a lot but don’t seem to find a satisfying answer.

    Issue: I want to style each of my menu items differently.
    Solution: give each li it’s own class: let’s say:li-1 li-2 etc.
    Tackles: I don’t care about the menu order, the default start should be 1 and adds +1 to following one.

    In css I would have used the ‘nth-child(1)’ but that’s not supported by all browsers.

    A common solution I found, was the backend approach which allows you to add a custom class to a menu item. Con: shift in menu order messes things up.

    //This is my default 
    
    <?php wp_nav_menu(array('theme_location' => 'main-nav' , 'fallback_cb' => 'default_main_nav' , 'container'  => '' , 'menu_id' => 'main-nav' , 'menu_class' => 'main-nav')); ?>

    I thought of the add_filter: “nav_menu_css_class” … but that only targets óne class. I just want to get an array of all the li’s in my menu and do a simple ‘for each’ …. but how??

    Hope you can help me.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Doesn’t each <li> have a unique class anyway from the wp_nav_menu function? Like “page-id-87”?

    Thread Starter 3Pinter

    (@3pinter)

    IT has. However I dont want to incl. Specific or better: unique classes in my css.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘wp nav menu with custom class for each li’ is closed to new replies.