Update on September 02, 2016: For an updated tutorial on this topic, see Fixed Primary Nav and Split Header Nav in Genesis.
In the past I wrote about achieving Primary Nav on left, Site Title or Logo in the middle and Secondary Nav on right in Genesis.
In this article I show how menu items of a single custom menu can be split with logo (or any HTML) appearing in the middle when using Genesis.
This method is certainly easier, less error-prone and straightforward.
Tested with Genesis Sample child theme. Should work with any Genesis theme with minor changes where applicable.
Desktop view:
Mobile view:
When the Header menu icon is tapped,
Note: We are going to use WP Nav Plus, a commercial plugin. This plugin has a 'Name Your Price' model starting with $11. According to the plugin's terminology, what is being discussed here are called 'Divided Menus' (Split Menus are different - basically Submenus).
Summary of steps
- Remove the Header Right widget area.
- Register a 'Header Navigation Menu' custom menu.
- Remove the standard Header content and add custom content in its place.
- Details of custom content: On mobile devices we will set logo to appear and a hamburger mobile menu below that . On non-mobiles, three menu items will appear to the left of logo and three menu items on the right (in this example). You can have any number of items on the left and right. It need not be equal.
- For the hamburger mobile menu, we will use code from Beautiful Pro.
- We will display right and down sub menu indicators (small arrows using Dashicons) for menu items that have children at desktop widths.
Implementation
Step 1
Upload beautiful-pro/js/responsive-menu.js (mirror) to {child theme directory}/js (create 'js' if not existing).
Sample file path: wp-content/themes/genesis-sample/js/responsive-menu.js
Step 2
Add the following in child theme's functions.php:
