This tutorial provides the steps to relocate the primary nav to in between site title and header right widget area in Genesis and customizing the CSS to display these inline incl. in mobile view.
We are going to
- set up custom image logo instead of the background custom header
- remove the primary navigation menu from below the site header
- append .nav-primary nav menu after .title-area
- remove .nav-primary's wrap
- add a search box before the list items in the primary menu (hidden on desktop and shown inside the mobile menu)
- use Flexbox to display the elements inside the .site-header in columns and vertically centered
Sample HTML output:
Mobile view:
While the tutorial has been written for Genesis Sample 2.3.0, it should work with a few adjustments in any Genesis theme.
Step 1
Add the following in child theme's functions.php:
