Title Area, Header Middle and Header Right in Genesis Site Header

In the comments section of my past tutorial titled Title Area, Header Middle widget area and Header Right widget area in Genesis Site Header, a few users wrote:

Hi Sridhar! Thanks for the tutorial.
Just a question: How can I arrange it to show in the middle area a menu that loks the same way as it does when we place one in the header right widget area? I mean inline an not a link under the other.

Thanks in advance!

Hi,
I’m also having the same issue the last comment-or had in regards to adding nav in the middle column.

The menu isn’t getting wrapped with the nav class that the right widget get’s added with.

I’m trying to arrage the header, header logo, nave menu, and then a button to the far right.

Any ideas?

thanks, chris

In the previous article, I said:

"At the moment it is not possible to inject an element in between .title-area and .header-widget-area using Genesis hooks. Therefore we shall re-write the default header function."

The above is no longer true thankfully due to the introduction of genesis_markup_<context>_<open/close> dynamic filter hooks in Genesis.

In this tutorial, we shall

• register a custom Header Middle widget area.
• hook a function to the `genesis_markup_header-widget-area_open` filter and append the output buffer of Header Middle widget area before the opening div tag so that the header's wrap will have .title-area, .header-middle and .header-widget-area (the built-in Header Right widget area).
• use Flexbox to lay these out inline on desktop-size widths.

We shall use wp_nav_menu_args and wp_nav_menu filters to ensure that nav menu inside the Navigation Menu widget gets the appropriate schema markup.

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: