[Support request] Navigation Alignment: Center = Not centered due to logo

[Fredrik]

As the title says. When I center the navigation, the navigation menu gets pushed to the right.
So basically, the branding logotype makes the nav NOT centering correctly.

Also, the search icon creates an illusion that the nav items aren’t centered. Would be good if the search icon is correctly centered with the nav.

PS: Removing the search icon makes the nav move even more away from the center.

[Leo]

Hi Fredrik,

Sorry I’m not quite sure what you meant or trying to achieve?

Are you trying to have logo in the center with menu items on both side or something?

What setting are you using for Navigation Location? (Customizer > Layout > Primary Navigation)

Let me know.

[Fredrik]

No, i’m not trying anything more than a centered navigation. Regular navigation with a normal logotype on the left side. Setting the navigation alignment function to “center” is not working properly. It’s not center aligned.

[Fredrik]

This is more of an bug report than anything else.

If the navigation logotype is added to a normal centered menu, the menu will not properly center as it gets pushed to the right by the logotype.

[Leo]

Do you have the Navigation Location set to either Float Right or Float left?
If so it’s not a bug. Normally users would have too many menu items for the logo to be center while the navigation float to the left or right.
If you set the Navigation Location to either above header and below header then the logo would be centered.

Let me know if this is what you meant. Might be easier to show me your site if I still misunderstood it.

[Leo]

Nevermind I think I got what you meant but it’s still not a bug.

Similar reason to what I mentioned above, normally users would have too many menu items for the navigation to be centered and still have room for the logo on the left.

If you can show us the site we might be able to help you with some CSS.

Let me know.

[Fredrik]

Here you can clearly see the settings and the misalignment of the menu. Removing the Logotype will make the menu properly aligned.

I have not tinkered with the CSS of the theme yet, just playing around to get comfortable with the theme.

http://oi68.tinypic.com/6yfina.jpg

[Leo]

Right. Like I mentioned above, normally there would be too many menu items for the navigation to be centered while leaving room for the logo on the left so people don’t need that setting. Imagine if you have 5 menu items instead of 3, it wouldn’t look very good as the first menu item would be right next to the logo on the left.

If you would like to have center navigation, you could try upload the logo in Customizer > Site Identity and set the Navigation Logo Position to Static Only.

[Fredrik]

So basically, I can’t have a perfectly aligned center menu if I want to have the logo on the left?

I can center it myself, that’s no problem. The website is on a local devenvironment. Just thought that this behaviour wasn’t proper. If I find a setting named “center”, I really think it should be centered.

[Leo]

There is a workaround. You could try by splitting the header into three sections:
https://generatepress.com/forums/topic/header-layout/#post-217337

The setting Center is really for when the navigation is above or below the header.

[Leo]

That link I provided above is talking about the same issue as you by the way.

[Tom]

Best thing to do in this case is to make the navigation logo absolutely positioned:

.navigation-logo {
    position:absolute;
    left: 0px;
}

Relative elements will push centered elements over, which is what’s happening here.

Making it absolute will take the logo out of the equation so the menu items can be center.

[Author]

Posts