[Support request] Put logo between navigation

[Melvin]

Can GeneratePress build a header like this, with the logo centralized between left and right navigations and a top header? I tried but to no avail. So I switched to another theme.

Can you help?

[Ying]

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.

[Melvin]

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?

[David]

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

[Melvin]

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.

[David]

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.

[Author]

Posts