- This topic has 10 replies, 3 voices, and was last updated 4 years ago by Tom.
-
AuthorPosts
-
February 26, 2020 at 11:29 am #1177875Judi
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?
February 26, 2020 at 11:55 am #1177893LeoStaffCustomer SupportHi 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 ๐
February 26, 2020 at 1:19 pm #1177961JudiThanks Leo. That worked as far as reducing the overall space. However, there is now more space on the left side than the right side.
February 26, 2020 at 1:46 pm #1177976JudiI 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?
February 26, 2020 at 5:04 pm #1178070LeoStaffCustomer SupportLooks 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/cMDsx7TLWFebruary 27, 2020 at 4:24 pm #1179201JudiYou 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.
February 27, 2020 at 6:27 pm #1179247LeoStaffCustomer SupportIt 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/February 28, 2020 at 1:25 pm #1180055JudiBoth 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.
February 29, 2020 at 12:20 am #1180269TomLead DeveloperLead DeveloperHi 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?
March 2, 2020 at 10:52 am #1182601JudiTom,
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
March 2, 2020 at 6:29 pm #1182891TomLead DeveloperLead DeveloperNo problem! A centered logo like this definitely involves a little more work than usual ๐
-
AuthorPosts
- You must be logged in to reply to this topic.