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) {
    #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;

    .main-navigation .inside-navigation {
        flex: 1;

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

CSS Code Reference: GeneratePress Docs

Leave a Comment