Archived topic
Spacing around logo when centered in the middle of menu
10 replies · Started by Judi on February 26, 2020
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?
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 :)
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.
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?
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
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.
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/
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.
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.
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?
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
No problem! A centered logo like this definitely involves a little more work than usual :)
