Site logo no longer left aligned

Hi there,

Do you have a Navigation logo uploaded in Customizer > Layout > Primary Navigation?

If so can you try removing it and upload that logo in Site Identity:
https://docs.generatepress.com/article/adding-header-logo/

Then activate the navigation as header option:
https://docs.generatepress.com/article/navigation-as-a-header/

Let me know if this helps :)

Thanks Leo.

I do have a navigation logo uploaded on Customizer > Layout > Primary Navigation.

I tried removing it and uploaded that file in Site Identity.

However, there is no option/check mark under Customizer > Layout > Header to activate the navigation as a header option.

I tried a variety of Layout > Header options but to no avail.

I already have an admin account for you guys in my WP if you want to take a look? I'll drop the login details in the private information box below.

Hi there,

However, there is no option/check mark under Customizer > Layout > Header to activate the navigation as a header option.

Can you try removing the logo on Customizer > Layout > Primary Navigation then save settings?

After saving, go refresh the customizer options page. Once refreshed, go to Appearance > Customize > Layout > Header again, you should see "Use Navigation as Header" check box after doing this. :D

Thanks Elvin. Saving and refreshing did show the option. And checking the User Navigation as Header option did work... with one caveat.

The site logo is now showing in the correct place and correctly aligned. But it is also smaller than the previous navigation logo configuration.

Looking through the inspector, I narrowed it down to these two CSS statements:

.navigation-branding img, .site-logo.mobile-header-logo img {
    height: 60px;
    width: auto;
}

... and ...

.navigation-branding img, .site-logo.mobile-header-logo img {
    position: relative;
    padding: 10px 0;
    display: block;
    transition: height .3s ease;
}

If I comment out height: 60px; and padding: 10px 0; then the logo shows as the normal/correct height and everything is finally as it should be.

The first rule with the height constraint is an inline style class: <style id='generate-navigation-branding-inline-css'>

The second rule with the padding is located in: navigation-branding-flex.min.css?ver=2.1.1

Do I need to create override classes somewhere in my own CSS to deal with this or is there a Customizer setting I am missing that will account for this logo size change?

Hi there,

the Navigation Logo gets its height from the Customizer > Layout > Primary Navigation --> Menu Item Height.
And has some default padding applied to it.

In your case - the simplest fix is to use this CSS to remove the padding:

.main-navigation .navigation-branding img {
    padding: 0;
}

Thanks David.

That worked great.

We're all set.

Glad to hear that!