[Resolved] move primary menu under hero image on front page only

[Melissa]

Is is possible to have my main navigation sit under my hero image, but only on the front page?

[Leo]

Hi there,

Try this PHP snippet:

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

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

Let me know if this helps 🙂

[Melissa]

Great–Thanks! Can I style this one separately from the menu on other pages?

[Leo]

Not sure if I understand.

Style what?

[Melissa]

The nav menu under the hero image

[Leo]

CSS is required. Let me know what you want to change 🙂

[Melissa]

If you can just tell me how to target the css, I can manage from there.

[Melissa]

I’d like to center the menu, and turn the background of the menu bar grey.

[Leo]

Try this:

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

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know 🙂

[Melissa]

That worked, but what I am aiming for is to align the whole menu in the center (on this page)

[Leo]

Edited the CSS here:
https://generatepress.com/forums/topic/move-primary-menu-under-hero-image-on-front-page-only/#post-1009579

Let me know 🙂

[Melissa]

Worked beautifully. Thanks

[Leo]

No problem 🙂

[Author]

Posts