Left aligned Site Title with Centered Navigation in Genesis

This tutorial provides the CSS to keep the site title aligned to the left and horizontally center the nav menu within the site header’s wrap in Genesis Sample 2.6.0.

Using CSS Grid

Works in all modern browsers.

Does not work in IE 11. Title area and primary nav will continue to appear left and right aligned respectively in IE 11.

At the end of 960px min-width media query, add

@supports (grid-area: auto) {
    .site-header > .wrap {
        display: grid;
        grid-template-columns: auto 1fr;
        justify-items: center;
    }

    .title-area {
        float: none;
        grid-column: 1 / -1;
        grid-row: 1 / -1;
        justify-self: start;
    }

    .nav-primary {
        float: none;
        grid-column: 1 / -1;
        grid-row: 1 / -1;
    }
}

By wrapping the code inside @supports (grid-area: auto), we are ensuring that this CSS is applied only in browsers that support the (current/modern version of) CSS Grid.

grid-column: 1 / -1: Set the element to stretch from first to the last column.

grid-row: 1 / -1: Set the element to stretch from first to the last row. Without this for both the elements, the primary nav will appear in a second (auto-generated implicit) row.

justify-self: start: Align the content inside this element to the left end of the grid.

Using Flexbox and Absolute positioning

Works in all browsers incl. IE 11.

At the end of 960px min-width media query, add

.site-header > .wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
            justify-content: center;
    position: relative;
}

.title-area {
    float: none;
    position: absolute;
    left: 0;
}