Snippet: Replace the Vertical Header Menu with an Accordion Menu
This snippet explains how you can replace the default header menu in the vertical header with a custom accordion style menu.
/**** PHP CODE ****/
// Insert a new nav_menu widget with the "widget_nav_menu_accordion" utility class wrapper to the header.
add_action( 'wpex_hook_header_inner', function() {
// Get main menu ID.
$main_menu_location = wpex_header_menu_location();
$theme_locations = get_nav_menu_locations();
if ( ! is_array( $theme_locations ) || ! array_key_exists( $main_menu_location, $theme_locations ) ) {
return;
}
$menu_obj = get_term( $theme_locations[$main_menu_location], 'nav_menu' );
if ( ! is_object( $menu_obj ) || empty( $menu_obj->term_id ) ) {
return;
}
// Display nav menu widget.
if ( class_exists( 'WP_Nav_Menu_Widget' ) ) {
$args = array(
'before_widget' => '<div class="widget_nav_menu_accordion"><div class="widget_nav_menu">',
'after_widget' => '</div></div>',
'before_title' => '',
'after_title' => ''
);
$instance = array(
'nav_menu' => $menu_obj->term_id,
);
the_widget( 'WP_Nav_Menu_Widget', $instance, $args );
}
}, 15 );
// Remove some customizer sections to prevent confusion.
add_filter( 'wpex_customizer_sections', function( $sections ) {
unset( $sections['wpex_header_fixed'] );
unset( $sections['wpex_fixed_menu'] );
unset( $sections['wpex_header_overlay'] );
unset( $sections['wpex_header_menu'] );
unset( $sections['wpex_menu_search'] );
return $sections;
} );
/**** CSS CODE ****/
#site-navigation-wrap { display: none !important; } /*hide default menu*/
.widget_nav_menu_accordion .widget_nav_menu .parent>a::after { font-family: "ticons"; } /* fix for icons - not needed in 5.3+ */
All PHP snippets should be added via child theme's functions.php file or via a plugin.
We recommend Code Snippets (100% Free) or WPCode (sponsored)
We recommend Code Snippets (100% Free) or WPCode (sponsored)