This members-only tutorial provides the steps to display
![](https://i1.wp.com/sridharkatakam.com/wp-content/uploads/2019/02/split-nav-genesis-sample28.png?fit=1024%2C130&ssl=1)
Between 960px and 1399px (inclusive) we shall
![](https://i0.wp.com/sridharkatakam.com/wp-content/uploads/2019/02/split-nav-genesis-sample28b.png?fit=1024%2C137&ssl=1)
959px and below, it will appear as usual.
![](https://i2.wp.com/sridharkatakam.com/wp-content/uploads/2019/02/split-nav-genesis-sample28c.png?fit=1024%2C119&ssl=1)
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!
Done.
Follow this tutorial: https://sridharkatakam.com/split-navigation-in-infinity-pro/
Thanks so much!
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?
So you want this? https://cl.ly/e7ab57801e5a
Make the following changes in style.css:
In the 1400px min-width media query,
1) replace
with
2) For
.title-area
, addmargin: 0 40px;
.3) For
.nav-secondary
, comment outjustify-self: end;
.[…] area and secondary menu horizontally centered using CSS Grid in the header of Infinity Pro based on this earlier […]