0

I've got this menu on my site:

<ul id="menu-primary" class="offcanvas">
    <li class="menu-item menu-item-has-children">
        <a href="#">Parent</a>
        <ul class="sub-menu">
            <li class="menu-item">
                <a href="#">Child</a>
            </li>
        </ul>
    </li>
    <li class="menu-item menu-item-has-children">
        <a href="#">Parent</a>
        <ul class="sub-menu">
            <li class="menu-item">
                <a href="#">Child</a>
            </li>
        </ul>
    </li>
    <li class="menu-item">
        <a href="#">Parent</a>
    </li>
    <li class="menu-item">
        <a href="#">Parent</a>
    </li>
</ul>

I added in some Jquery to hide the sub-menus and to show them once you click on the parent link but this causes the parent link not to function and just toggle the sub-menu.

So i'd like to add a toggle-able element via a <i> tag or <span> tag after the main parent link and then just change the jquery to target that instead making the main parent link still click-able.

How would I go about doing this?

1

You can easily add any HTML element to all menu items that have children by extending the Walker_Nav_Menu core class. The code below will add <i> icon element just after menu item </a> tag but you can of course change that if you need them inside or somewhere else by changing the $item_output variable.

function yourprefix_menu_arrow($item_output, $item, $depth, $args) {
    if (in_array('menu-item-has-children', $item->classes)) {
        $arrow = '<i class="fa fa-angle-down"></i>'; // Change the class to your font icon
        $item_output = str_replace('</a>', '</a>'. $arrow .'', $item_output);
    }
    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'yourprefix_menu_arrow', 10, 4);

Cheers!

  • Thanks @Lazer this seemed to do the trick. I thought it might be related to walker but wasn't sure how to implement this. – Demonix Aug 20 at 8:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.