[Resolved] Splitting the navigation and centering logo and site title

Home Forums Support [Resolved] Splitting the navigation and centering logo and site title

Home Forums Support Splitting the navigation and centering logo and site title

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1623280
    Erika

    Hi there,

    I saw that you just updated the article on Centering your logo in the navigation.

    I followed the steps, but the menu is not splitted in the middle and the logo overlays the menu therefore. I searched the Forum, earlier there were a few other way with menu-separator-items or making two menus, etc. It looks like to be a common issue, great on updating the article. Could you take a look and tell me which settings I have to change to get the menu splitted in two halves: 4 menu items on the right, 4 menu items on the left and the logo in the middle, but on baseline with the menu (just like it looks now?)

    Thanks, Erika

    #1623699
    David
    Staff
    Customer Support

    Hi there,

    can you share a login/password to the site or remove the coming soon page?

    #1623706
    Erika

    Sorry David, turned off maintenance 😉

    #1623756
    David
    Staff
    Customer Support

    Find this part of the CSS:

    .main-navigation ul li:nth-child(3) {
        margin-left: auto;
    }

    change :nth-child(3) to :nth-child(5)

    #1623782
    Erika

    Looks better. The right part of the navigation is however aligned more to the right. I see that the logo is in the middle. So I have a chance to set the right part closer to the logo, even if that means that the navigation is not completely centered, but more aligned to the right?

    #1623803
    Erika

    I thought about assigning to the four items on the left a class menu-item-left and to the four items on the right menu-item-right and align them like this:

    .menu-item-right {
    text-align:left;
    }

    .menu-item-left {
    text-align:right;
    }

    Anyhow, that might be an idea: to align the left part to the right and vice versa. Same distance from the logo in the middle. Or you have another idea…

    #1623879
    David
    Staff
    Customer Support

    The problem is due to the varying widths of each menu item. Simply put you don’t have an even layout.

    For example if you could re-arrange the menu order so:

    Klangschalen is before Pflanzenheilkunde then the layout works nicely.

    if we try to modify the widths of individual menu items then you will have extra space in places… which doesn’t look nice either.

    #1624751
    Erika

    You´re right. Looks like we go another way with the design, but it is awesome that centering the logo got so easy! Thank you again, David 🙂

    #1624765
    David
    Staff
    Customer Support

    You’re welcome – yes Flexbox certainly made that a lot easier and it works with all common configurations of the header / nav and sticky 🙂

    #1624768
    Erika

    Thanks, I´ll play around with it 😉

    #1624778
    David
    Staff
    Customer Support

    Be glad to hear how it works

    #1642612
    Erika

    I close this as it is solved 🙂

    #1643023
    David
    Staff
    Customer Support
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.