Tiêu đề trang web căn trái với Điều hướng căn giữa trong Genesis

Hướng dẫn này cung cấp CSS để giữ cho tiêu đề trang được căn chỉnh ở bên trái và theo chiều ngang của menu điều hướng trong phần bọc của tiêu đề trang trong Genesis Sample 2.6.0.

Sử dụng CSS Grid

Hoạt động trên tất cả các trình duyệt hiện đại.

Không hoạt động trong IE 11. Vùng tiêu đề và điều hướng chính sẽ tiếp tục xuất hiện căn trái và phải tương ứng trong IE 11.

Khi kết thúc truy vấn phương tiện chiều rộng tối thiểu 960px, hãy thêm

@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;
    }
}

Bằng cách gói mã bên trong , chúng tôi đảm bảo rằng CSS này chỉ được áp dụng trong các trình duyệt hỗ trợ CSS Grid (phiên bản hiện tại / hiện đại của).@supports (grid-area: auto)

grid-column: 1 / -1 : Đặt phần tử kéo dài từ cột đầu tiên đến cột cuối cùng.

grid-row: 1 / -1 : Đặt phần tử kéo dài từ hàng đầu tiên đến hàng cuối cùng. Nếu không có điều này cho cả hai phần tử, điều hướng chính sẽ xuất hiện trong hàng thứ hai (ngầm định được tạo tự động).

justify-self: start : Căn chỉnh nội dung bên trong phần tử này về phía cuối bên trái của lưới.

Sử dụng Flexbox và định vị tuyệt đối

Hoạt động trong tất cả các trình duyệt bao gồm. IE 11.

Khi kết thúc truy vấn phương tiện chiều rộng tối thiểu 960px, hãy thêm

.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;
}