Community Forums › Forums › Archived Forums › Design Tips and Tricks › Moving nav outside of header wrap
- This topic has 9 replies, 2 voices, and was last updated 9 years, 4 months ago by
rfmeier.
-
AuthorPosts
-
January 23, 2014 at 3:05 pm #86687
NWTD
MemberI'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?
January 23, 2014 at 4:38 pm #86703rfmeier
MemberHello,
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.
January 23, 2014 at 4:46 pm #86705NWTD
MemberThanks @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.
January 23, 2014 at 7:04 pm #86717rfmeier
MemberHello,
I had time to look at the source now. Within the genesis_do_header() A few actions get triggered.
genesis_site_title
genesis_site_descriptionIf 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.
January 24, 2014 at 10:09 am #86836NWTD
MemberI 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.
January 24, 2014 at 11:23 am #86846rfmeier
MemberI 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.
January 24, 2014 at 12:41 pm #86860NWTD
MemberThanks 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>', ) ); }
January 24, 2014 at 12:43 pm #86861rfmeier
MemberJanuary 24, 2014 at 1:02 pm #86862NWTD
MemberJust 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.
January 24, 2014 at 3:05 pm #86882rfmeier
MemberYup. I was looking within the Genesis theme (framework). SublimeText has great search functionality. It is a matter of finding where the code is executed.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.