Split Navigation in Infinity Pro

This members-only tutorial provides the steps to set up primary menu, title area and secondary menu horizontally centered using CSS Grid in the header of Infinity Pro based on this earlier tutorial.

If you wish to purchase this tutorial individually, click here.

We shall combine primary and secondary menus inside the hamburger menu 800px and below.

Tested in Infinity Pro 1.2.0.

Step 1

Edit Infinity Pro's functions.php.

a) Combine the primary and secondary menus in the mobile menu.

Change

// Define our responsive menu settings.
function infinity_responsive_menu_settings() {

	$settings = array(
		'mainMenu'         => __( 'Menu', 'infinity-pro' ),
		'menuIconClass'    => 'ionicons-before ion-ios-drag',
		'subMenu'          => __( 'Submenu', 'infinity-pro' ),
		'subMenuIconClass' => 'ionicons-before ion-chevron-down',
		'menuClasses'      => array(
			'others' => array(
				'.nav-primary',
			),
		),
	);

	return $settings;

}

to