How to Center Logo in GeneratePress

In this quick video, I will show you how to center logo in GeneratePress. It involves adding few Custom CSS to your website.

Custom CSS Code

@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 {
        margin-left: unset !important;
        display: flex;
    }

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

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

    .main-navigation ul li:nth-child(3) {
        margin-left: auto;
    }
}

CSS Code Reference: GeneratePress Docs