How to apply individual menu item’s “CSS Classes” to , not <li?

enter image description here

WordPress’ Menu constructor allows you to apply custom “CSS Classes” to menu items…

However, those classes are applied to the list item which wraps anchors, and not to anchors themselves…

<li id="menu-item-320" class="btn btn-primary text-white menu-item menu-item-type-custom menu-item-object-custom menu-item-320 nav-item mx-3">
    <a href="#product" class="nav-link" aria-expanded="false">Product</a>
</li>

How can I ensure that the value I place in “CSS Classes” for a particular menu item (btn btn-primary text-white) are applied not to

  • but to instead… ?

    <li id="menu-item-320" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-320 nav-item mx-3">
        <a href="#product" class="nav-link btn btn-primary text-white" aria-expanded="false">Product</a>
    </li>
    

    FYI, I am using a BS4Navwalker.

    Some related things I have previously tried…

    • I am aware of a method to add classes to all menu anchors – but I want to add classes to just one.
    • I am aware of the possibility to use ACF to add a custom field to the menu and output any value added – but I would prefer that this can be by specifying the classes to be added in WordPress’ own “CSS Classes”, without ACF.

    Read more here:: <a href=https://wordpress.stackexchange.com/questions/316531/how-to-apply-individual-menu-items-css-classes-to-a-not-li target="_blank" title="How to apply individual menu item's "CSS Classes" to , not

  • How to apply individual menu item’s “CSS Classes” to , not <li?

  • Leave a Reply

    Your email address will not be published. Required fields are marked *