Menu Title Search In Mobile Genesis Header

This solution enables you to display the toggle menu, site title or header image and search form inline on smaller screens like this :

This tutorial is based on this question from a member of the Genesis community :

One FIXED bar with the hamburger icon + the site logo + the search icon). Getting the menu bar with menu + logo + search feature in a fixed bar for mobile is the dream of a lot of users.

This solution uses the Site Identity > Logo feature in the customizer rather than the header image function.

#Custom Logo

Modify the following code between lines 154 – 155 in the Genesis Sample themes functions.php to change the dimensions of your custom logo added via the customizer > site identity field.

// Adds custom logo in Customizer > Site Identity.
add_theme_support(
	'custom-logo', array(
		'height'      => 40,
		'width'       => 100,
		'flex-height' => true,
		'flex-width'  => true,
	)
);

CSS is included so you can easily change the stacking order at any screen width as seen in the following demo video :

#Demo Video

The video shows the toggle menu in the left column, logo in the middle and search box in the right column at 960px width with the drop down menu items aligned left.

At 560px width, the 3 header elements display logo, search, menu with the drop down menu items aligned center.

Note : This solution enables you to reposition any header elements to any position at any screen width in any Genesis child theme. Tested using the Genesis Sample child theme by StudioPress.

Register or login to access the download folder :