CODEWITHSUNDEEP
phphtmlwordpress
Warre Buysse
Warre Buysse

Reputation: 1345

Custom menu first item active state in wordpress

I would like to put the first custom menu item active, so there needs to be an "active" class. How can I do that? This is my html:

<nav class="secondmenu">
    <div class="menu-captain-crew-container">
        <ul id="menu-captain-crew" class="secondnav">
         <li id="menu-item-35" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-35"><a title="Captain" href="#Captain">Captain</a></li>
         <li id="menu-item-36" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-36"><a title="Chief Stewardess" href="#chief-stewardess">Chief Stewardess</a></li>
         <li id="menu-item-37" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-37"><a title="Chief Engineer" href="#chief-engineer">Chief engineer</a></li>
         <li id="menu-item-38" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-38"><a title="Purser" href="#purser">Purser</a></li>

        </ul>
   </div>           
 </nav>

And this is the code I use to get my custom menu in my template:

<?php wp_nav_menu(array('menu' => 'Captain & Crew', 'menu_class' => 'secondnav')); ?>

Thanks!

Upvotes: 1

Views: 2214

Answers (1)

AndyWarren
AndyWarren

Reputation: 2012

Go to Appearance > Menus in the WordPress admin area. Then open "Screen Options" and make sure "CSS Classes" is checked. "Screen Options" is the tab in the very top right corner of your admin screen. See the screenshot below.

enter image description here

Then open the menu item that you wish to add the class to and type your class name in the "CSS Classes" input. Make sure to save your menu changes before exiting the menu screen. See screenshot below.

enter image description here

This will add the class to the wrapping <li></li> of the menu item you entered the class for.

Upvotes: 3

Related Questions