I'm struggling to figure out how to add my own class names to my wp_nav_menu. I have a custom walker menu set up to change a UL name, but how does one go about adding a css class to li's that are one and two levels deep?
I want my menu to look like this:
<ul>
<li class="top_level_class">One</li>
<li class="top_level_class">Two
<ul>
<li class="second_level_class">Hi</li>
</ul>
</li>
</ul>
My custom walker looks like this:
class My_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"nav-main-sub-list\">\n";
}
}
But that just swaps out the class on the UL two levels in. I am confused how I would add classes to the LI's one and two levels deep. Any advice?
You can use the $depth parameter to determine if the LI element is in a top or second level UL, for example an an item in the top level will have a depth of 0, and a depth of 1 for the 2nd level.
You will need to modify the start_el method. See below, hopefully that will get you started
class My_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"nav-main-sub-list\">\n";
}
function start_el(&$output, $item, $depth, $args) {
...
if($depth == 1) {
$class_names = ' class="second_level_class"';
} else {
$class_names = ' class="top_level_class"';
}
$output .= $indent . '<li' . $class_names . '>';
...
}
}
There is some more information about customising the Walker class here:
https://wordpress.stackexchange.com/questions/116708/customizing-walker-nav-menu
http://code.tutsplus.com/tutorials/understanding-the-walker-class--wp-25401
Please follow this steps i think this might be to helpful you.
http:// www.xyz.com/wp-admin/nav-menus.php
Look at the top of the screen and you find out the "Screen Oprions" button and click on this button and check the "CSS Classes" option.
After the you can give the another your custom css classes.
