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

Home Forums Support Navigation Alignment: Center = Not centered due to logo

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #274278
    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.

    GeneratePress 1.3.44
    GP Premium 1.2.94
    #274295
    Leo
    Staff
    Customer Support

    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.

    #274320
    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.

    #274333
    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.

    #274337
    Leo
    Staff
    Customer Support

    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.

    #274344
    Leo
    Staff
    Customer Support

    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.

    #274347
    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
    center nav not aligned

    #274356
    Leo
    Staff
    Customer Support

    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.

    #274370
    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.

    #274371
    Leo
    Staff
    Customer Support

    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.

    #274372
    Leo
    Staff
    Customer Support

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

    #274414
    Tom
    Lead Developer
    Lead Developer

    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.

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