[Resolved] Move Navigation to the bottom of the Header

[Jorge]

Started as a suggestion (https://generatepress.com/forums/topic/future-addon-ideas/page/13/#post-237466), to have a “switch” for the Page Header Add-On. To be able to move the navigation to the bottom of the content inserted by the Page Header.

@Tom asked:

So are you wanting the navigation below the page header element, or inside the page header element but at the bottom?

I think that if it is inside the page header element (like it is “usually”) but just below the content it might be easier to maintain the transparent style and not to disappear from the view if the Page Header is set to be fullscreen.

[Tom]

Not as easy as I thought, but I have one idea that might work.

For me to write the code, I’ll need to know where your navigation is currently set to (below header, above header etc..).

[Jorge]

On the Customize page:

Layout > Primary Navigation

Navigation Width: Full
Position: Float Right
Sticky: Both

—

Yeah, I tried to peek a bit in the code and I was not sure where to start. Good to know you’ve got an idea!

[argosmedia]

Hi Jorge,

not quite sure what you have in mind, but maybe something like I did here?
http://www.docenten-coaching.nl/

It’s custom work, because I didn’t succeed with the tools GP and the header addon offered. If this is something like you have in mind, I will tell how I did it.

[Tom]

My idea is kind of flawed because it would involve moving the navigation into the page header element, but what about pages without the page header?

You could try something like this, but not sure if it will work:

add_action( 'wp','tu_move_nav_inside_page_header' );
function tu_move_nav_inside_page_header() {
    if ( ! function_exists( 'generate_page_header_get_options' ) ) {
        return;
    }

    $options = generate_page_header_get_options();

    if ( '' !== $options['content'] ) {
	remove_action( 'generate_after_header_content', 'generate_add_navigation_float_right', 5 );
	add_action( 'generate_after_page_header', 'generate_add_navigation_float_right', 5 );
    }
}

[Jorge]

It does work, Tom, thanks!
Sorry for the late reply, since this is a project for me I just have to squeeze time between client work.

Since I specifically want to use it on the homepage, just adding an is_home() setting does it. However, if the page doesn’t have a header, that’s a great question! I’ll try to poke here and there to see if I can find a solution.

However, there’s an “issue”. If I set the Page Header content to be Fullscreen, the menu doesn’t appear until you scroll down.
I found out that if I change the height of .generate-content-header { height: 87vh !important; }it does look quite well. This, however, I am not sure where to change it so it doesn’t break other pages (and so I can update GP and such).

[Tom]

Any chance you can link me to the page so I can see?

[Jorge]

A long time has passed since I had any chance to update/move it to a live server, but here it is: http://narvaezdelamora.com

[Tom]

You could get fancy if you don’t need to support old IE versions:

.generate-content-header {
    height: calc( 100vh - 60px ) !important;
}

[Jamal]

Hi

Any way to make the navigation appear right after the page header image? I have no content in the page header just an image and have also removed the site header completely. Navigation currently set to below header. Thanks !

[Tom]

This might do it: https://generatepress.com/forums/topic/flip-menu-and-page-header/#post-143766

[Jamal]

You absolutely rock Mr genius ! That did work indeed. Is there any layout this theme can’t do? Thanks very much

[Tom]

You’re very welcome 🙂

[Sergio]

Hi,

I’ve added that snippet to my functions.php file but

get_post_meta( get_the_ID(), '_meta-generate-page-header-content', true )

always return an empty string. I’m not sure about what i’m doing wrong. I’ve tried with different page headers and all of them have content but I get always the same empty string.

¿Do you know where the problem could be?

Thanks a lot.

[Tom]

I just adjusted the code above to work with GPP 1.4: https://generatepress.com/forums/topic/move-navigation-to-the-bottom-of-the-header/#post-237705

[Author]

Posts