[Resolved] Move navigation below hero Element on home page

[Teresa]

I want to move the primary navigation on a site’s home page so that it’s immediately below the hero. I’ve tried the code snippets I’ve seen throughout the support forums here, and they aren’t working.

Actually, this snippet tweaked from one Sridar posted does remove the nav:

add_action( 'generate_header','afv_move_navigation' );
function afv_move_navigation() {
    remove_action( 'generate_after_header', 'generate_add_navigation_after_header', 5 );
    add_action( 'generate_after_page_header', 'generate_add_navigation_after_header' );
}

But it doesn’t add the nav back.

I am trying to do this with Hooks. If I have to create a functionality plugin I will (but I’d rather not!). Also, the Hero in question is one created with Elements – could that be the issue?

Thanks for any assistance.

[Leo]

Hi Teresa,

Try this PHP snippet:
https://generatepress.com/forums/topic/page-header-image-above-menu/#post-288568

Adding PHP: https://docs.generatepress.com/article/adding-php/

And make sure the navigation location is set to Below Header in the customizer:
https://docs.generatepress.com/article/navigation-location/

[Teresa]

Thanks for the reply, Leo. I’ve got this sorted, but wanted to share what I did in case it’s wrong, or in case it can help someone else.

The snippet that uses after_setup_theme doesn’t work for me, neither in an Element using a hook or in a separate code snippet (using the Code Snippets plugin).

This works:

add_action( 'generate_header','afv_move_navigation' );
function afv_move_navigation() {
    remove_action( 'generate_after_header', 'generate_add_navigation_after_header', 5 );
    add_action( 'generate_after_header', 'generate_add_navigation_after_header', 15 );
}

This is what else I have going on, in case my use case is different from what others have asked about in the forums:

• I’m using Elements to create a special header for the home page only.
• The home page is the only one I wanted to try moving the nav on.
• When I first tried the code, I used another Element – a hook – to insert it. Changed it so many times I’ve no idea which hooks I tried.
• I also tried the “craig_move_navigation()” code you linked to in a Code Snippet vs. an Element; did not work there, either.

What ultimately worked:

• The “afv_move_navigation()” code above.
• Using the Hook Element Type with the Hook set to before_header.
• Navigation set to Below Header (this is how I set it up to begin with, so no change).

Please let me know if using generate_header vs. after_theme_setup could create a problem or conflict.

Thanks!

[Leo]

My code here needs to be added via Code Snippets or child theme’s function.php:
https://generatepress.com/forums/topic/page-header-image-above-menu/#post-288568

It should not be in a hook element.

Just tested the code and it seems to work for me.

I’m surprised that using generate_header would work. Just checked the site and I’m still seeing the navigation merged with the header element and not below?

[Teresa]

¯\_(ツ)_/¯

I did try your code using Code Snippets, and had no luck.

The reason you’re seeing it back up top again is because after all of the stressing out about trying to get it to work, once I did I realized it was probably not the best choice for a full-screen hero.

I turned the Element off and reworked the nav colors. Still messing around with it but I think I’m going to keep it above the header. Turned the Element back on long enough to take screen shots so you could see it.

[Leo]

What if you do this instead?

add_action( 'wp','afv_move_navigation' );
function afv_move_navigation() {
    remove_action( 'generate_after_header', 'generate_add_navigation_after_header', 5 );
    add_action( 'generate_after_header', 'generate_add_navigation_after_header', 15 );
}

[Author]

Posts