Replace existing menu with ShiftNav

Hi triplemoons,

You can disable the toggle bar in the Control Panel.

Then you can place a Custom Toggle wherever you like in your theme to trigger ShiftNav. I would not recommend placing it inside a menu item, as I believe you’ll end up with nested anchors, which could cause issues.

You would then remove your theme’s menu if you like by removing that code from the header template.

Note you’d make those changes in a child theme in order to preserve them for next time you update the theme; most likely you’d be overriding the header.php

There isn’t a way to automatically do this, as it requires adding and removing code in a specific location in a theme template.

Hope that helps!

Chris

Right, I was saying it was a 3-step process (1) disable toggle, (2) insert custom toggle, (3) remove theme menu

If you wanted to avoid editing the template, I suppose you could do something clever like this and short-circuit the menu output in the child theme:

add_filter( 'pre_wp_nav_menu' , 'replace_menu_with_shiftnav' );
function replace_menu_with_shiftnav( $nav_menu , $args ){
	return '<a class="shiftnav-toggle" data-shiftnav-target="shiftnav-main"><i class="fa fa-bars"></i></a>';
}

That code replaces all menus with a ShiftNav toggle. Note that you’d want to add some conditional logic in there if you have more than one wp_nav_menu call in your theme.

Hope that helps 🙂

Chris

Hi triplemoons,

That’s a warning that occurred in the Pro beta – nothing to worry about (it won’t break anything), but please download the latest beta which resolves it: shiftnav-pro-1.2.1-beta-3.zip – thanks!

Also, regarding that PHP snippet I provided above, I’d suggest making it more robust like this:

//Replace menu with shiftnav toggle
add_filter( 'pre_wp_nav_menu' , 'replace_menu_with_shiftnav' , 50 , 2 );
function replace_menu_with_shiftnav( $nav_menu , $args ){
	if( $args->theme_location == 'primary' ){
		return '<a class="shiftnav-toggle" data-shiftnav-target="shiftnav-main"><i class="fa fa-bars"></i> Menu</a>';
	}
	return $nav_menu;
}

Replace primary with your own theme location to make sure the code only targets the specific menu you’re looking to replace.

Looks like you’re using the Pro version now? Please post your questions in the Support Forum to receive support for the Pro version – thanks! 🙂

Best,

Chris