[Resolved] Issue on GP Beta 3 with niche theme centering logo and having menu in left+right

[Adrien]

Hello,

Im trying to center my logo and make the primary menu spread on left and right using a menu custom link separator with the css class as menu-item-separator.

I have followed all instructions in this article: https://docs.generatepress.com/article/centering-logo-navigation/

However it does not seem to work.

Would appreciate your help there. Thank you very much. Adrien

[David]

Hi there,

can you disable your cache, and remove the Split Nav CSS so i can provide some new CSS.

[Adrien]

Hey David, Thanks a lot. I have disabled the cache and removed the split nav CSS code.

[Tom]

Stole this CSS from David a while back, worth a shot:

@media (min-width: 769px) {
    .navigation-branding {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
        text-align: center;
    }

    .main-nav {
        margin-left: unset;
        flex-basis: 100%;
    }

    .main-navigation li:nth-child(2) {
        margin-right:auto;
    }

    .main-navigation .inside-navigation {
        flex-wrap: nowrap;
    }
}

Let us know 🙂

[Adrien]

😉 Thanks a lot Tom. Actually it almost worked. Here is how it looks like:

https://tinyurl.com/yyhq48ny

It seems the menu custom link separator with the css class as menu-item-separator does not work.

Appreciate all your fantastic support.

[Tom]

You can actually just remove that menu item separator – it’s not necessary with this code.

Then you can fix the cart menu item with this:

.menu-bar-items {
    flex-shrink: 0;
}

[Adrien]

Tom thanks a ton! It worked perfectly 😉

[Tom]

Awesome, glad I could help 🙂

[Author]

Posts