[Resolved] Centering Block Site Header that contains an image

[Bruce]

Hi Leo,
I really appreciate your assistance and apologize for not letting you know how grateful I am for your help.

I have disabled my block site header as requested.

As we proceed, I think it is important the I share with you what I am trying to accomplish. It is quite possible that I may be taking the wrong approach.

My client wants the front page to be different from the other pages.
On the front page, she wants a header that has an image similar to the logo followed by the site title and the navigation centered below it.
On the other pages, she wants to use the navigation as header with the logo and menu aligned to the left.

The two problems I have been trying to solve are
1. getting the site head to have the image and title centered both horizontally and vertically (the site title coming out of the middle of the image) and

2. On the front page, she wants to have a menu centered below the header with no logo while on the other pages the navigation as header be left floating menu with the logo. I have never used an off canvas menu, but it sounds like it may be part of the solution.

I await your guidance.
https://brucel27.sg-host.com/

[Leo]

Let’s solve one request at a time.

This is the front page I’m seeing currently:
https://www.screencast.com/t/4nTnq95p

Is the only issue that the logo needs to be hidden?

If so try adding this CSS:

.home .site-logo {
    display: none;
}

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

[Bruce]

This is what I want it to look like
http://brucel27.sg-host.com/wp-content/uploads/2023/01/HomepageImage.png
The image is a version of the logo with no writing under the flower.

[Leo]

This is what I want it to look like
http://brucel27.sg-host.com/wp-content/uploads/2023/01/HomepageImage.png

And that logo (without text) only applies to the home page right?

If so leave the current logo (with text) in the customizer, and use this filter to switch out the logo on the home page:
https://docs.generatepress.com/article/generate_logo/

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

The is_front_page() conditional tag would be what you need:
https://codex.wordpress.org/Conditional_Tags#The_Front_Page

[Bruce]

That worked! I see the logo wanted on the Home page.

[Leo]

Ok so just to confirm, are we all good on the home page?

[Bruce]

Yes. The home page looks the way I want it to.

[Leo]

Now let’s tackle this one:

while on the other pages the navigation as header be left floating menu with the logo.

Try adding this PHP snippet to turn on the navigation as header option globally except for the home page:

add_filter( 'option_generate_menu_plus_settings', function( $settings ) {
    if ( !is_front_page() ) {
        $settings['navigation_as_header'] = 'true';
    }

    return $settings;
} );

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

[Bruce]

That did not do what was expected. The header is still on the pages

[Leo]

That did not do what was expected. The header is still on the pages

The code is indeed working from what I can see.

There is not enough room for the logo, title and menu to stay in one line. Can you try increasing the container width?
https://docs.generatepress.com/article/container-width/

Try something like 1100px.

[Bruce]

I thought it would come up with just the logo and not the site title. How can I get rid of the site title?

[Leo]

Try this CSS:

body:not(.home) .main-navigation .main-title {
    display: none;
}

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

Then you can set the navigation alignment if needed:
https://docs.generatepress.com/article/navigation-layout/#navigation-alignment

[Bruce]

Thanks Leo,
That takes care of that part.
Last thing, can I have
Navigation centered on the front page (as it is now and
Navigation has header left justified on all other pages?

[Leo]

Try this CSS as well:

body:not(.home) .main-navigation .navigation-branding {
    margin-right: auto;
}

[Bruce]

That works for the logo, but not the actual menu

[Author]

Posts