Skip to content

Instantly share code, notes, and snippets.

@pavlo-bondarchuk
Created September 26, 2020 08:20
Show Gist options
  • Select an option

  • Save pavlo-bondarchuk/bec29f3f4ad40b78383fe9ceadfb70a9 to your computer and use it in GitHub Desktop.

Select an option

Save pavlo-bondarchuk/bec29f3f4ad40b78383fe9ceadfb70a9 to your computer and use it in GitHub Desktop.
Edit submenu& subsubmenu classes and add arrow icon before submenu & subsubmenu and add custom class to <li> & link
// create for wp_nav_menu custom options: list_item_class & link_class
function add_menu_link_class( $atts, $item, $args ) {
if (property_exists($args, 'link_class')) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
// add custom ul submenu class if depth & class
add_filter( 'nav_menu_submenu_css_class', 'change_wp_nav_menu', 10, 3 );
function change_wp_nav_menu( $classes, $args, $depth ) {
foreach ( $classes as $key => $class ) {
if ( $class == 'sub-menu' && $depth == 0 ) {
$classes[ $key ] = 'area_dropdown';
}
if( $class == 'sub-menu' && $depth == 1 ){
$classes[ $key ] = 'area_dropright';
}
}
return $classes;
}
// add custom icon via nav menu custom walker
class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_lvl(&$output, $depth) {
if ( $depth == 0 ) {
$output .= '<svg class="icon arrow"><use xlink:href="../assets/images/sprite.svg#down-arrow"></use></svg>';
$output .= '<ul class="area_dropdown">';
}
if ( $depth == 1 ) {
$output .= '<svg class="icon arrow arrow_right"><use xlink:href="../assets/images/sprite.svg#down-arrow"></use></svg>';
$output .= '<ul class="area_dropright">';
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment