• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Moving nav outside of header wrap

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

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

This topic is: resolved
  • This topic has 9 replies, 2 voices, and was last updated 9 years ago by rfmeier.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 23, 2014 at 3:05 pm #86687
    NWTD
    Member

    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?

    January 23, 2014 at 4:38 pm #86703
    rfmeier
    Member

    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

    January 23, 2014 at 4:46 pm #86705
    NWTD
    Member

    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.

    January 23, 2014 at 7:04 pm #86717
    rfmeier
    Member

    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

    January 24, 2014 at 10:09 am #86836
    NWTD
    Member

    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.

    January 24, 2014 at 11:23 am #86846
    rfmeier
    Member

    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

    January 24, 2014 at 12:41 pm #86860
    NWTD
    Member

    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>',
    	) );
    
    }
    January 24, 2014 at 12:43 pm #86861
    rfmeier
    Member

    Great to hear. I am glad I could help.


    Ryan Meier – Twitter

    January 24, 2014 at 1:02 pm #86862
    NWTD
    Member

    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.

    January 24, 2014 at 3:05 pm #86882
    rfmeier
    Member

    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
Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble