Having trouble adding CSS class through menu to link

Question

I have a menu item that is a custom link. I want to add some CSS to this particular item only, so I'm going in and adding a CSS class through the menu. Without adding the class, the HTML looks like this:

<a href="#">My Menu Text</a>

When I add the class through the Menu editor, the resulting HTML looks like this:

<a href="#">
    <i class="no-hover"></i>
    "My Menu Text"
</a>

So I can't use the class to reference the <a> element. This is contrary to all of the doc that I've read, which all suggests that you can simply put the class into the menu item through the editor and then simply reference it in CSS.

Is this perhaps a strange feature introduced by a plugin I'm using, or is there something I'm missing?

Did you enable css class for menu item under Appearance > Menus (Screen option) and added the css class?? — Bikash Waiba
– Bikash Waiba, Commented Mar 30, 2018 at 7:35
Normally, the class specified in menu editor, will be added to li element. Check, if your theme uses a custom menu walker. If it does, then analyze the code in it. What theme do you use? — Frank P. Walentynowicz
– Frank P. Walentynowicz, Commented Mar 30, 2018 at 7:39
@FrankP.Walentynowicz That's what I thought, too. I'm using the kadence virtue theme. — BobRodes
– BobRodes, Commented Apr 1, 2018 at 1:03

Frank P. Walentynowicz · Accepted Answer · 2018-04-01 14:32:06Z

1

The problem is an incorrect implementation of a menu item custom class by Virtue theme. Two changes are required in themes/virtue/lib/nav.php file. Replace line 30:

//$classes[] = $custom_class;

with:

$classes[] = $custom_class;

Replace line 45:

$icon  = ! empty( $custom_class) ? '<i class="'. $custom_class . '"></i>' : '';

with:

$icon  = '';

Note: to avoid your changes being overwritten by theme's update, create a child theme, and make your changes in it.

answered Apr 1, 2018 at 14:32

Frank P. Walentynowicz

3,4022 gold badges20 silver badges20 bronze badges

Hey, thanks, Frank! I appreciate your digging around. That works for me. That code certainly looks off.

BobRodes
– BobRodes

2018-04-03 04:51:58 +00:00
Commented Apr 3, 2018 at 4:51

Add a comment |

Stack Exchange Network

Having trouble adding CSS class through menu to link

1 Answer 1

Your Answer

Hot Network Questions

Having trouble adding CSS class through menu to link

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions