[Resolved] Site logo no longer left aligned

Home Forums Support [Resolved] Site logo no longer left aligned

Home Forums Support Site logo no longer left aligned

  • This topic has 7 replies, 4 voices, and was last updated 2 months ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2020113
    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.

    #2020351
    Leo
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #2020452
    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.

    #2020713
    Elvin
    Staff
    Customer Support

    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. ๐Ÿ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #2021133
    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?

    #2021393
    David
    Staff
    Customer Support

    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;
    }
    #2024222
    Paul

    Thanks David.

    That worked great.

    We’re all set.

    #2024446
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.