Put logo between navigation

Hi Melvin,

You can use this method to center the logo: https://docs.generatepress.com/article/centering-logo-navigation/

And you can create a block element - hook to add the topbar, choose before_header as the hook name, choose the entire site accordingly.

Hi, Ying

Thanks for the quick response as usual.

The method has both the left and right menu flush to both ends. What if I want them to be close to the logo at the centre like shown on my current site?

Hi there.

it will require some additional CSS to restrict the inner container.
If you want to follow the method that Ying provided, and then share a link to the site, i can assist with that

Hi, David

By link, are you talking about the front end? If yes, it's already on the first post. But currently, it's not using GP theme.

Ah, ok, kinda need to see it on GP... but you can do something like this instead:

@media(min-width: 769px) {
    .inside-header>.site-branding,
    .inside-header>.navigation-branding,
    .inside-header>.site-logo,
    .site-branding-container,
    #site-navigation .navigation-branding .site-logo,
    #sticky-navigation .navigation-branding {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
    }

    #site-navigation {
        max-width: 900px; /* change width of nav */
        margin: auto;
        display: flex;
    }

    .site-header .main-navigation:not(#sticky-navigation) .inside-navigation {
        margin: unset;
    }

    #site-navigation,
    #primary-menu,
    .main-navigation .inside-navigation {
        flex: 1;
    }

    /* Change nth-child(#) to first item to right */
    .main-navigation ul li:nth-child(3) {
        margin-left: auto;
    }
}

Note this line: max-width: 900px; /* change width of nav */ is where you define the max width of the nav in order to bring those items in closer.