I would like to extend that - like in the normal WP menu - an arrow is displayed next to the menu item for sub-menu items (Example attached).
How can I get this code
function be_arrows_in_menus( $item_output, $item, $depth, $args ) {
if( in_array( 'menu-item-has-children', $item->classes ) ) {
$arrow = 0 == $depth ? '<i class="icon-angle-down"></i>' : '<i class="icon-angle-right"></i>';
$item_output = str_replace( '</a>', $arrow . '</a>', $item_output );
}
return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'be_arrows_in_menus', 10, 4 );
from here https://www.billerickson.net/code/add-arrows-to-menu-items/ to achieve this?
Thanks a lot!
You can insert it in your active wp-themes functions.php file or use > Code Snippets plugin.
The code below uses the integrated Font Awesome icons
function be_arrows_in_menus( $item_output, $item, $depth, $args ) {
if( in_array( 'menu-item-has-children', $item->classes ) ) {
$arrow = 0 == $depth ? '<i class="fa-solid fa-angle-down"></i>' : '<i class="fa-solid fa-chevron-right"></i>';
$item_output = str_replace( '</a>', $arrow . '</a>', $item_output );
}
return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'be_arrows_in_menus', 10, 4 );
Thank you so much, @tutrix !
I had not considered that it could be only the missing icon... 😉
Since I'm using Generate-Press and it makes an SVG next to the parent menu items by itself at Wordpress-Menu (so with the code snippet two would be displayed), I now make these arrows disappear via CSS:
.menu-item-has-children .dropdown-menu-toggle {
display: none!important;
}
Because I need to make the wordpress menu visible on other pages.