Sridhar Katakam

Genesis and WordPress Tutorials

Split Navigation in Genesis Sample 2.8.0

by 6 Comments

This members-only tutorial provides the steps to display primary navigation menu at the left, title area in the middle and secondary navigation menu at the right in Genesis Sample 2.8.0.

Between 960px and 1399px (inclusive) we shall center the site header elements one below the other.

959px and below, it will appear as usual.

Tested in Genesis Sample 2.8.0 and Genesis 2.8.1

Step 1

Edit Genesis Sample's functions.php.

a) Let's combine the primary and secondary menus in the mobile menu.

Change

/**
 * Defines responsive menu settings.
 *
 * @since 2.3.0
 */
function genesis_sample_responsive_menu_settings() {

	$settings = array(
		'mainMenu'         => __( 'Menu', 'genesis-sample' ),
		'menuIconClass'    => 'dashicons-before dashicons-menu',
		'subMenu'          => __( 'Submenu', 'genesis-sample' ),
		'subMenuIconClass' => 'dashicons-before dashicons-arrow-down-alt2',
		'menuClasses'      => array(
			'combine' => array(
				'.nav-primary',
			),
			'others'  => array(),
		),
	);

	return $settings;

}

to

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

Already a member? Log in below or here.

  • Sridhar, is there a way to adapt this for Infinity Pro? I’ve tried don’t know enough PHP to pull off the adjustments. I’ve seen your other tutorial for split navigation in Infinity Pro but I like this one better because it seems cleaner and based on a more recent version of Genesis. Thanks!

    Reply

  • Thanks for this tutorial Sridhar. What adjustment could I make so that the menus are closer to the logo like in your split menu nav tutorial dated Oct 6 2016, where they menus surround the logo?

    Reply

    • So you want this? https://cl.ly/e7ab57801e5a

      Make the following changes in style.css:

      In the 1400px min-width media query,

      1) replace

      .nav-primary {
    grid-column: 1;
}

      with

      .nav-primary {
    justify-self: flex-end;
}

      2) For .title-area, add margin: 0 40px;.

      3) For .nav-secondary, comment out justify-self: end;.

      Reply
    • >