Moving nav outside of header wrap

Community Forums Forums Design Tips and Tricks Moving nav outside of header wrap

This topic is: resolved

This topic contains 9 replies, has 2 voices, and was last updated by  rfmeier 8 months, 1 week ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #86687

    NWTD
    Participant
    Post count: 61

    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?

    • This topic was modified 8 months, 1 week ago by  NWTD.
    • This topic was modified 8 months, 1 week ago by  NWTD.
    #86703

    rfmeier
    Participant
    Post count: 597

    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.


    #86705

    NWTD
    Participant
    Post count: 61

    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.

    #86717

    rfmeier
    Participant
    Post count: 597

    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.


    #86836

    NWTD
    Participant
    Post count: 61

    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.

    #86846

    rfmeier
    Participant
    Post count: 597

    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.


    #86860

    NWTD
    Participant
    Post count: 61

    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>',
    	) );
    
    }
    #86861

    rfmeier
    Participant
    Post count: 597

    Great to hear. I am glad I could help.


    #86862

    NWTD
    Participant
    Post count: 61

    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.

    #86882

    rfmeier
    Participant
    Post count: 597

    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.


Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.