Foodie Pro Full Width Site Header

This solution enables you to modify the site header in Foodie Pro.

Make the site header full width
Display the site title or header image ( logo ) inline with the header right widget elements. In this case, the nav menu width and search widget are displayed inline with the logo.
Display each site header element full width on smaller screens.
Re-order the header elements on mobiles so you can display the 1) title area containing the logo 2) search widget 3) menu toggle for the nav menu. The CSS also enables you to re-order these elements to display 1) search widget 2) menu 3) title area.

Watch the demo video to see 1 example of the stacking order of elements on mobiles.

#Demo Video

Shows the Foodie Pro site header modified to displays the site header full width with the title area to the left of the screen and the header right widgets floated right. Enables the reordering of elements on mobiles so the mobile menu icon displays after the header search form.