Split menu with logo in the center?

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

Thanks for the assist Natalie :)

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 :)

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.

Hi @David!

Thanks for the prompt response.

I just shared my website url :)

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

Yes, I've tried that several times. It's not moving :|

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.

Thanks @David!

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

How can I make it work?

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;
    }
}

Now the logo has disappeared :|

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

It's working fine now! Thanks so much, @David :)

Glad to hear that :)