Replace Vertical Header Menu with an Accordion

Important: Creating a Layout Like the Docs

You can create a site layout similar to these docs by using the default sidebar and hiding it on mobile devices. Then, use the Header Builder to create a mobile-specific header, applying visibility settings so that your custom header only appears on mobile.

We then created a dynamic template part containing the Sidebar Menu widget, and then used the Total – Template widget to display it in the sidebar.

It is strongly recommended to use this solution rather then the custom snippet below.

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*/
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)
Related Snippets
  • This snippet was last updated on
Back To Top