[Resolved] Site logo no longer left aligned

[Paul]

Hey guys.

Since updating to GP Premium 2.1.1 and Generate Press 3.1, my site logo is now right aligning next to the menu options. Previously, it used to be left aligned (floated).

Looking at the CSS, the .main-navigation .navigation-logo class still has the attribute float:left.

I’ve narrowed it down to the following CSS:

.nav-align-right .inside-navigation {
    justify-content: flex-end;
}

In the inspector, if I deactivate the justify-content: flex-end; attribute, the sticky logo floats left as it used to. When justify-content: flex-end; is enabled, the logo lays out to the right with the menu options.

Nothing changed in my own code, so can you guys advise how best to proceed?

Website in question is noted in the private information.

[Leo]

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 🙂

[Paul]

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.

[Elvin]

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. 😀

[Paul]

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?

[David]

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;
}

[Paul]

Thanks David.

That worked great.

We’re all set.

[David]

Glad to hear that!

[Author]

Posts