[Resolved] Spacing around logo when centered in the middle of menu

Home Forums Support Spacing around logo when centered in the middle of menu

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1177875
    Judi

    I used the instructions on https://docs.generatepress.com/article/centering-logo-navigation/ to center my logo in the middle of my menu. It worked. However, there is a lot of extra spacing on both sides of my logo. I’ve looked through the additional CSS code that I needed to add for this effect. I’ve tried changing a few values. But nothing changed. So, I restored to the original code.

    How can I reduce the spacing?

    #1177893
    Leo
    Staff
    Customer Support

    Hi Judi,

    Try this CSS:

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

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

    Let me know if this helps 🙂

    #1177961
    Judi

    Thanks Leo. That worked as far as reducing the overall space. However, there is now more space on the left side than the right side.

    #1177976
    Judi

    I changed the background hover color to do some testing. It appears as though my logo is right-aligned versus centered. How can I change that?

    #1178070
    Leo
    Staff
    Customer Support

    Looks like you’ve added margin-left: -25px; that might be causing the issue?

    That’s not in the original CSS we’ve provided:
    https://www.screencast.com/t/cMDsx7TLW

    #1179201
    Judi

    You might have looked at it when I was testing different settings. With the original code, the logo is shifted to the right. I added color to the background of the logo area and to the background hover for the menu items so that you can see how it formatted using your code. If you hover over the menu items to the left and right of the logo, you will see a gap on the left side of the logo but not on the right.

    #1179247
    Leo
    Staff
    Customer Support

    It looks pretty center to me.

    Can you make sure the left and right header padding is the same value?
    https://docs.generatepress.com/article/header-padding/

    #1180055
    Judi

    Both right and left padding are set at 0px. I did try changing them to see if it would help. But it had no effect on the logo placement.

    This image shows that that the logo is clearly not centered. There are 40px on the left and 0px on the right of the logo.
    Extra spacing on left side of logo

    This simply doesn’t make sense. The code is simple. My settings are correct.

    I have another website where I’d like to use this same layout. So, I need to get this figured out.

    #1180269
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    The logo actually is perfectly centered. However, it doesn’t appear so because the text on the right is longer than the text on the left.

    As a test, can you change the “Join my community” label to “Join”? Does it make a difference?

    #1182601
    Judi

    Tom,

    Thank you for pointing out that, in this code, the logo is centered horizontally on its own and is not truly a part of the menu/navigation. I see that the spacing changes based on the length of text on my menu items versus having equal spacing on each side of the logo which aligns with the edges of the menu items on the left and right. I will test different ways of naming my menu items in order to achieve the visual/aesthetic appearance that I prefer to have with a centered logo.

    Judi

    #1182891
    Tom
    Lead Developer
    Lead Developer

    No problem! A centered logo like this definitely involves a little more work than usual 🙂

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