[Resolved] Split menu with logo in the center?

[Mike]

Hi awesome people,

How can I create a navbar with a logo in the center, similar to roastycoffee.com?

Thanks so much 🙂

[Natalie]

have a look at this page to start with
https://docs.generatepress.com/article/centering-logo-navigation/

[David]

Thanks for the assist Natalie 🙂

[Mike]

Thanks so much, @Natalie.

One more issue – the logo is in the center, though all menu items are on the right. How do I split them to both sides?

Thanks again 🙂

[David]

Can you share a link to your site so we can see what the issue is?
You can edit your original topic and use the Site URL field to share the link privately.

[Mike]

Hi @David!

Thanks for the prompt response.

I just shared my website url 🙂

[Leo]

Can you try arranging the menu item as how you want them to show up?

Like moving the Home and About menu item before the menu item separator item

[Mike]

Yes, I’ve tried that several times. It’s not moving 😐

[David]

Add this CSS to your Site:

.main-navigation:not(.slideout-navigation) .main-nav {
    flex: 1;
}

Then move the menu-item-separator to where you require it – eg. between Home and About.

[Mike]

Thanks @David!

It’s in the middle now but the mobile nav isn’t working :'(

How can I make it work?

[David]

Remove just the CSS you have added for the split menu and use this instead:

.navigation-branding {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translatex(-50%);
}

.main-nav {
    flex: 1 0 100%;
}

.menu-item-separator {
    visibility: hidden;
    pointer-events: none;
    flex: 1;
}

.main-navigation .mobile-bar-items {
    margin-right: auto;
}

@media (min-width: 769px) {
    .main-navigation ul.menu {
        display: flex;
    }
}

@media(max-width: 768px) {
    .main-navigation.toggled .main-nav li.menu-item-separator {
        display: none !important;
    }
}

[Mike]

Now the logo has disappeared 😐

[David]

You need to remove all the CSS you originally added for the Split Menu.

[Mike]

It’s working fine now! Thanks so much, @David 🙂

[David]

Glad to hear that 🙂

[Author]

Posts