How to add a class in anchor tag on my custom menu?

  • [ Moderator note: moved to How-to and Troubleshooting. ]

    Hello,
    My navigation menu goes like this:

    <ul class="menu" id="menu-navigation-desktop">
<li class="menu-item menu-item-type-post_type menu-item-object-page top-menu-item"><a class="top-menu-item-a" href="#"><span>Home</span></a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page top-menu-item top-menu-item-has-sub-menu"><a class="top-menu-item-a top-menu-item-has-sub-menu-a" href="#"><span>About Us</span></a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">Mission</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">Objectives</a></li>
</ul>
</li>
</ul>

    How can I insert a class top-menu-item-a on my anchor tag only on my parent menu not in submenus. And I need to display inline (horizontally). Now menus are displayed vertically. I’ve inserted <span> tag by using this code.

    <?php 
$arg = array(
'menu' => 'main_menu',
'menu_class' => 'menu',
'link_before' => '<span>',
'link_after'  => '</span>',
'container' => ''
);
wp_nav_menu( $arg );
?>
    • This topic was modified 8 years, 5 months ago by jklyn.
    • This topic was modified 8 years, 5 months ago by jklyn.
    • This topic was modified 8 years, 5 months ago by Jan Dembowski.
Viewing 3 replies - 1 through 3 (of 3 total)

  • You can add classes manually to menu items, you need to use the Screen Options tab when editing a menu to enable the CSS Classes option, you will then be able to add any class to your <li> items.

    Are you able to provide a link to your site so I can inspect further and try to provide you with some working CSS code that will fix your menu?

    Thanks.

    Thread Starter jklyn

    (@jklyn)

    ThemeSumo, I’ve not uploaded the site yet.

    This is the actual html format what I need to display:
    <li class="menu-item menu-item-type-post_type menu-item-object-page top-menu-item"><a class="top-menu-item-a" href="#"><span>Home</span></a></li>

    But it’s displaying as:
    <li class="menu-item menu-item-type-post_type menu-item-object-page top-menu-item"><a href="#"><span>Home</span></a></li>

    Can you explain me in details.

    In that case I’m not too sure how you would add a class to the hyperlink only, sorry.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to add a class in anchor tag on my custom menu?’ is closed to new replies.