[Resolved] Center inline logo without moving menu items to edges

Home Forums Support Center inline logo without moving menu items to edges

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1123830
    jhmattern

    Hello. I’m trying to finish a theme move from Divi to GeneratePress, and I have it just about where I want it other than the header and primary menu.

    I already followed the instructions at the link below to get the center inline logo set up.

    https://docs.generatepress.com/article/centering-logo-navigation/

    The problem is this pushed both sides of the menu to the outer edges of the site. I need them each moved more toward the center – radiating out from the logo instead of having big gaps in the menu.

    Is there a way I can adjust the CSS from that help page to accomplish this?

    Thanks!

    #1124013
    Leo
    Staff
    Customer Support

    Hi there,

    What if we add this CSS as well?

    .inside-navigation.grid-container {
        max-width: 800px;
    }

    Let me know πŸ™‚

    #1125530
    jhmattern

    650px did beautifully in this case. Thanks so much!

    #1126145
    Leo
    Staff
    Customer Support
    #1146342
    jhmattern

    I have a quick follow-up on this. When I center the logo but also set sticky navigation, the logo disappears but the full width stays open, leaving a big space in the middle of a menu.

    Is there a way to either have the logo stay there but shrink with the menu, or have the logo remove and have the two sides of the menu come back together in the middle when the sticky menu displays?

    #1146671
    David
    Staff
    Customer Support

    Hi there,

    for the logo to shrink during transition needs the Navigation as Header option to be enabled and this method applied:

    https://docs.generatepress.com/article/centering-logo-navigation/#using-the-navigation-as-a-header

    If you want to set that up i can assist with some CSS to increase the static logo size etc…

    #1147133
    jhmattern

    Thanks. I’ll try that on one of the sites. For the main one I’m working on right now, I think it would be better just to skip the logo in the sticky menu. Is there a way to remove that large space left from .menu-item-separator when it’s in the sticky nav?

    #1147245
    David
    Staff
    Customer Support

    So this CSS – which will also remove the menu separator from the mobile:

    .main-navigation.is_stuck ul {
        justify-content: center;
    }
    
    .main-navigation.is_stuck .menu-item-separator, 
    #mobile-header .menu-item-separator {
        display: none !important;
    }

    And also fix the logo when mobile menu is open – edit this CSS and add the top property i have commented below

    .site-branding,
    .site-logo {
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        z-index: 200;
        top: 0; /* Add this property */
    }
    #1220641
    jhmattern

    Hi. You gave me a fix previously to close the gap left when the center logo disappears on scrolling. It was working great on several of my sites, but since a recent update it appears to be broken again. Do you know what I can do to fix this again and make sure it’s preserved on updates? You can see an example at https://ajkleinbooks.com — when you scroll, the logo disappears, but there’s a huge gap left in the menu again.

    Thanks!

    #1220719
    David
    Staff
    Customer Support

    Hi there,

    that site seems to be missing this CSS:

    .main-navigation.is_stuck .menu-item-separator, 
    #mobile-header .menu-item-separator {
        display: none !important;
    }
    #1221823
    jhmattern

    That is super weird. I know we had that working on several of my sites previously, and all custom CSS is in the same place. Not sure what happened to change that. Thanks for figuring that out though. Seems to be working on that site, and I’ll go implement it on the others that were affected too. Much appreciated!

    #1221907
    David
    Staff
    Customer Support

    Glad to be of help πŸ™‚

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.