Skip to content

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)
Back To Top