Moving nav outside of header wrap

[NWTD]

I'm trying to move the navigation to the header. I was successful with using the the following:

remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_header', 'genesis_do_nav' );

But that drops the navigation inside the header's wrap. Is there a way to move the navigation right after the closing of the wrap, but still inside the header?

[rfmeier]

Hello,

Genesis builds the header (with wraps) like so:

add_action( 'genesis_header', 'genesis_header_markup_open', 5 );
add_action( 'genesis_header', 'genesis_do_header' );
add_action( 'genesis_header', 'genesis_header_markup_close', 15 );

So, the priority need to be set to a value after 15.

add_action( 'genesis_header', 'genesis_do_nav', 16 );

Let me know if this helps.

---

Ryan Meier – Twitter

[NWTD]

Thanks @rfmeier .

I tried your suggestion. That moved the nav outside of the </header> DOM. I tried a value of 15, which resulted in the same. I tried a value of 14, which put the navigation inside the <div class="wrap"> DOM...which is right back where I started.

[rfmeier]

Hello,

I had time to look at the source now. Within the genesis_do_header() A few actions get triggered.

genesis_site_title
genesis_site_description

If the theme has header sidebars, then those are displayed immediately after 'genesis_site_description'.

Try adding a callback for 'genesis_site_description' action with a priority greater than 10.

Hope this helps.

---

Ryan Meier – Twitter

[NWTD]

I don't think that will get the nav where I'm needing it. My current HTML ouput is as follows:

<header>
     <div class="wrap">
             <div class="title-area"></div>
             <aside class="widget-area"></div>
     </div>
</header>

So everything I've tried, puts my nav inside the <div class="wrap">, which I don't want. Ideally, I'd like to look like this:

<header>
     <div class="wrap">
             <div class="title-area"></div>
             <aside class="widget-area"></div>
     </div>
     <nav class="primary"></nav>
</header>

Where the nav is outside of the div.wrap. I hope that makes more sense.

[rfmeier]

I was able to actually dig in on my development box and can see the issue...

The wrap close and header element close are right next to each other like so;

genesis_structural_wrap( 'header', 'close' );
genesis_markup( array(
	'html5' => '</header>',
	'xhtml' => '</div>',
) );

This is the content within the callback for 'genesis_header'

add_action( 'genesis_header', 'genesis_header_markup_close', 15 );

One solution is to remove and redeclare the core callback function with your custom code.

remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );
add_action( 'genesis_header', 'custom_genesis_header_markup_close', 15 );
function custom_genesis_header_markup_close() {

	genesis_structural_wrap( 'header', 'close' );

	//	add your custom code here.
	
	genesis_markup( array(
		'html5' => '</header>',
		'xhtml' => '</div>',
	) );

}

You could also break this up into three callbacks;
1. Structural wrap close.
2. Your code.
3. Genesis markup close.

I hope this helps.

---

Ryan Meier – Twitter

[NWTD]

Thanks so much @rfmeier! That worked perfect!

My final code in my functions.php looked like this:

remove_action( 'genesis_after_header', 'genesis_do_nav' );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );
add_action( 'genesis_header', 'custom_genesis_header_markup_close', 15 );
function custom_genesis_header_markup_close() {

	genesis_structural_wrap( 'header', 'close' );

	genesis_do_nav();
	
	genesis_markup( array(
		'html5' => '</header>',
		'xhtml' => '</div>',
	) );

}

[rfmeier]

Great to hear. I am glad I could help.

---

Ryan Meier – Twitter

[NWTD]

Just out of curiosity, when you say you dug around int he code, by that I suppose you mean the Genesis "Theme", but were specifically are you looking. There's a few other similar cases I need to figure out for my custom theme, and I'd like to try to figure it out myself.

[rfmeier]

Yup. I was looking within the Genesis theme (framework). SublimeText has great search functionality. It is a matter of finding where the code is executed.

---

Ryan Meier – Twitter

[Author]

Posts