Sridhar Katakam

Genesis and WordPress Tutorials

Split Navigation in Infinity Pro

by 4 Comments

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

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Hi – any chance you can update this for Infinity 1.3.2? The functions.php bit has changed, and I don’t understand how to implement it via the new method. Thanks.

    Reply

    • I just figured out that with version 1.3.2 you have to edit both the fuctions.php file and also the config/theme-supports.php file (where you add in ‘secondary’ => __( ‘Secondary Menu’, ‘infinity-pro’ ), under ‘genesis-menus’. Once you do that, it works except for the fact that you have to re-do some of the css styling.

      Reply

  • I’m using Infinity Pro and when I used this method it centered the hamburger menu under logo like I want, but removed one side of my split nav. Can you share how to have both a split nav menu on desktop and tablet view but a centered hamburger menu under the logo for mobile view?

    Thanks!

    Reply
    • >