[Resolved] How to enable header as navigation on every page except Home page?

[paddyd]

I’ve looked all over and haven’t yet figured out how to do this. Created a home page header element – it’s displaying nicely, but the nav menu is still up at the top as it is on all the other pages. Installed Code Snippets and attempted to figure out how to make that do the job, but can’t see any options in the examples given that would do what I need. (I turned sticky menu on in the snippet – just to see that it was indeed working).

To be clear – I don’t want to remove the navigation – I simply want it to be under (after) the header image (centered) as per the settings in the header element for the home page only.

https://muskokastyle.com/test1 is the GP version of the site (just started working on it and trying to get my head around Gutenberg and GB as well…there will be more questions on that as well)

Old site with home page header and nav in the correct locations: https://muskokastyle.com (done in Thesis)

[David]

Hi there,

set your Primary Navigation location to Below Header and add this PHP Snippet to your site:

add_action( 'after_setup_theme','craig_move_navigation' );
function craig_move_navigation() {
    remove_action( 'generate_after_header', 'generate_add_navigation_after_header', 5 );
    add_action( 'generate_after_header', 'generate_add_navigation_after_header', 15 );
}

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

FYI – the Header Element is not the same as the Site Header. But a separate element commonly known as a Hero that would be displayed below or merged with the site header. That piece of code will unhook the navigation and hook it in below the header element.

[paddyd]

Ok – so we’re part way there. Now I have the nav where it belongs on the home page, except it’s the same as the nav menu on the other pages, complete with logo and menu off to the right. I need just the centred menu, without the logo. 😉

[Leo]

Try this CSS:

.home .navigation-branding {
    display: none;
}
.main-navigation:not(.slideout-navigation) .main-nav {
    margin-left: auto;
    margin-right: auto;
}

[paddyd]

THANK YOU, Leo!! I looked at the CSS and couldn’t figure out how to do it. Installed Conditional Menus, but that didn’t help either. Phew. On to the next mystery!

[Leo]

No problem 🙂

[Author]

Posts