Biểu trưng hình ảnh chính giữa với khu vực tiện ích con bên phải trong Genesis

Trong nhóm Genesis Facebook, một người dùng đã hỏi:

có cách nào để sử dụng biểu trưng hình ảnh được căn giữa trong tiêu đề với tiện ích con tiện ích con tiêu đề bên phải và vẫn có biểu trưng được căn giữa trên trang không?

Một cách có thể được thực hiện là đặt vùng tiêu đề không nổi bên trái, sau đó đặt độ rộng tự động cho vùng tiện ích con bên phải tiêu đề.

Hướng dẫn này được viết cho Genesis Sample 2.2.4.

Chỉnh sửa chủ đề con .style.css

Bước 1

a) Bên trên các truy vấn phương tiện, hãy thêm

.header-image .title-area {
    float: none;
}

.site-header .widget-area {
    width: auto;
    margin-top: -20px;
}

Bước 2

Đặt CSS làm cho hình ảnh tiêu đề và biểu tượng menu bánh hamburger kích hoạt sớm ở 1340px thay vì 1023px.

a) Thay thế

@media only screen and (max-width: 1340px) {

    .site-inner,
    .wrap {
        max-width: 1140px;
    }

    .content-sidebar-sidebar .content-sidebar-wrap,
    .sidebar-content-sidebar .content-sidebar-wrap,
    .sidebar-sidebar-content .content-sidebar-wrap {
        width: 920px;
    }

    .content,
    .site-header .widget-area {
        width: 800px;
    }

    .sidebar-content-sidebar .content,
    .sidebar-sidebar-content .content,
    .content-sidebar-sidebar .content {
        width: 580px;
    }

    .sidebar-primary {
        width: 300px;
    }

    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3 {
        width: 340px;
    }

    .footer-widgets-1 {
        margin-right: 60px;
    }

}

với

@media only screen and (max-width: 1340px) {

    .site-inner,
    .wrap {
        max-width: 1140px;
    }

    .content-sidebar-sidebar .content-sidebar-wrap,
    .sidebar-content-sidebar .content-sidebar-wrap,
    .sidebar-sidebar-content .content-sidebar-wrap {
        width: 920px;
    }

    .content,
    .site-header .widget-area {
        width: 800px;
    }

    .sidebar-content-sidebar .content,
    .sidebar-sidebar-content .content,
    .content-sidebar-sidebar .content {
        width: 580px;
    }

    .sidebar-primary {
        width: 300px;
    }

    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3 {
        width: 340px;
    }

    .footer-widgets-1 {
        margin-right: 60px;
    }

    .site-header .widget-area,
    .title-area {
        width: 100%;
    }

    .site-header .wrap {
        padding-left: 5%;
        padding-right: 5%;
    }

    .genesis-nav-menu li,
    .header-image .title-area,
    .site-header ul.genesis-nav-menu,
    .site-header .search-form {
        float: none;
    }

    .genesis-nav-menu,
    .site-description,
    .site-header .title-area,
    .site-header .widget-area,
    .site-title {
        text-align: center;
    }

    .site-header .search-form {
        margin: 16px auto;
    }

    .js nav.nav-primary,
    .js .site-header nav  {
        display: none;
        position: relative;
    }

    .js .site-header nav .wrap {
        padding: 0;
    }

    .js nav.pagination {
        display: block;
    }

    .menu-toggle,
    .sub-menu-toggle {
        border-width: 0;
        background-color: #fff;
        color: #333;
        display: block;
        margin: 0 auto;
        overflow: hidden;
        text-align: center;
        visibility: visible;
    }

    .sub-menu-toggle:hover,
    .sub-menu-toggle:focus {
        border-width: 0;
    }

    .menu-toggle {
        border-top: 1px solid #eee;
        line-height: 20px;
        position: relative;
        right: 0;
        z-index: 1000;
        width: 100%;
    }

    .site-header .menu-toggle {
        border: 0;
    }

    .menu-toggle:before,
    .menu-toggle.activated:before {
        margin-right: 10px;
        text-rendering: auto;
        -webkit-transform: translate(0, 0);
        -ms-transform:     translate(0, 0);
        transform:         translate(0, 0);
    }

    .sub-menu-toggle {
        float: right;
        padding: 10px;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 100;
    }

    .sub-menu-toggle:before {
        display: inline-block;
        text-rendering: auto;
        -webkit-transform: translate(0, 0);
        -ms-transform:     translate(0, 0);
        transform:         translate(0, 0);
    }

    .sub-menu-toggle.activated:before {
        content: "\f142";
    }

    .js .nav-primary .genesis-nav-menu .menu-item,
    .js .site-header .genesis-nav-menu .menu-item {
        display: block;
        float: none;
        margin: 1px 0;
        position: relative;
        text-align: left;
    }

    .js .genesis-nav-menu .menu-item:hover {
        position: relative;
    }

    .js .nav-primary .genesis-nav-menu .menu-item a,
    .js .site-header .genesis-nav-menu .menu-item a {
        border: none;
        padding: 12px 0;
        width: 100%;
    }

    .js .genesis-nav-menu .sub-menu {
        border: none;
    }

    .js .genesis-nav-menu .menu-item > a:focus ul.sub-menu,
    .js .genesis-nav-menu .menu-item > a:focus ul.sub-menu .sub-menu {
        left: 0;
        margin-left: 0;
    }

    .js .genesis-nav-menu > .menu-item-has-children > a:after {
        content: none;
    }

    .js .genesis-nav-menu .sub-menu {
        clear: both;
        display: none;
        margin: 0;
        opacity: 1;
        padding-left: 15px;
        position: static;
        width: 100%;
    }

    .js .genesis-nav-menu .sub-menu .sub-menu {
        margin: 0;
    }

    .js nav button:hover,
    .js .menu-toggle:hover,
    .js .nav-primary {
        background-color: #fff;
        color: #000;
    }

    .js nav button:focus,
    .js .menu-toggle:focus {
        background-color: #fff;
        color: #c3251d;
    }

    .footer-widgets-1,
    .footer-widgets-2 {
        margin: 0 auto 40px;
    }

}

NS)

@media only screen and (max-width: 1023px) {

    .site-inner,
    .wrap {
        max-width: 800px;
    }

    .content,
    .content-sidebar-sidebar .content,
    .content-sidebar-sidebar .content-sidebar-wrap,
    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3,
    .js .genesis-nav-menu .sub-menu a,
    .js .genesis-nav-menu .sub-menu, 
    .sidebar-content-sidebar .content,
    .sidebar-content-sidebar .content-sidebar-wrap,
    .sidebar-primary,
    .sidebar-secondary,
    .sidebar-sidebar-content .content,
    .sidebar-sidebar-content .content-sidebar-wrap,
    .site-header .widget-area,
    .title-area {
        width: 100%;
    }

    .site-header .wrap {
        padding-left: 5%;
        padding-right: 5%;
    }

    .genesis-nav-menu li,
    .header-image .title-area,
    .site-header ul.genesis-nav-menu,
    .site-header .search-form {
        float: none;
    }

    .genesis-nav-menu,
    .site-description,
    .site-header .title-area,
    .site-header .widget-area,
    .site-title {
        text-align: center;
    }

    .site-header .search-form {
        margin: 16px auto;
    }

    .js nav.nav-primary,
    .js .site-header nav  {
        display: none;
        position: relative;
    }

    .js .site-header nav .wrap {
        padding: 0;
    }

    .js nav.pagination {
        display: block;
    }

    .menu-toggle,
    .sub-menu-toggle {
        border-width: 0;
        background-color: #fff;
        color: #333;
        display: block;
        margin: 0 auto;
        overflow: hidden;
        text-align: center;
        visibility: visible;
    }

    .sub-menu-toggle:hover,
    .sub-menu-toggle:focus {
        border-width: 0;
    }

    .menu-toggle {
        border-top: 1px solid #eee;
        line-height: 20px;
        position: relative;
        right: 0;
        z-index: 1000;
        width: 100%;
    }

    .site-header .menu-toggle {
        border: 0;
    }

    .menu-toggle:before,
    .menu-toggle.activated:before {
        margin-right: 10px;
        text-rendering: auto;
        -webkit-transform: translate(0, 0);
        -ms-transform:     translate(0, 0);
        transform:         translate(0, 0);
    }

    .sub-menu-toggle {
        float: right;
        padding: 10px;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 100;
    }

    .sub-menu-toggle:before {
        display: inline-block;
        text-rendering: auto;
        -webkit-transform: translate(0, 0);
        -ms-transform:     translate(0, 0);
        transform:         translate(0, 0);
    }

    .sub-menu-toggle.activated:before {
        content: "\f142";
    }

    .js .nav-primary .genesis-nav-menu .menu-item,
    .js .site-header .genesis-nav-menu .menu-item {
        display: block;
        float: none;
        margin: 1px 0;
        position: relative;
        text-align: left;
    }

    .js .genesis-nav-menu .menu-item:hover {
        position: relative;
    }

    .js .nav-primary .genesis-nav-menu .menu-item a,
    .js .site-header .genesis-nav-menu .menu-item a {
        border: none;
        padding: 12px 0;
        width: 100%;
    }

    .js .genesis-nav-menu .sub-menu {
        border: none;
    }

    .js .genesis-nav-menu .menu-item > a:focus ul.sub-menu,
    .js .genesis-nav-menu .menu-item > a:focus ul.sub-menu .sub-menu {
        left: 0;
        margin-left: 0;
    }

    .js .genesis-nav-menu > .menu-item-has-children > a:after {
        content: none;
    }

    .js .genesis-nav-menu .sub-menu {
        clear: both;
        display: none;
        margin: 0;
        opacity: 1;
        padding-left: 15px;
        position: static;
        width: 100%;
    }

    .js .genesis-nav-menu .sub-menu .sub-menu {
        margin: 0;
    }

    .js nav button:hover,
    .js .menu-toggle:hover,
    .js .nav-primary {
        background-color: #fff;
        color: #000;
    }

    .js nav button:focus,
    .js .menu-toggle:focus {
        background-color: #fff;
        color: #c3251d;
    }

    .footer-widgets-1,
    .footer-widgets-2 {
        margin: 0 auto 40px;
    }

}

với

@media only screen and (max-width: 1023px) {

    .site-inner,
    .wrap {
        max-width: 800px;
    }

    .content,
    .content-sidebar-sidebar .content,
    .content-sidebar-sidebar .content-sidebar-wrap,
    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3,
    .js .genesis-nav-menu .sub-menu a,
    .js .genesis-nav-menu .sub-menu,
    .sidebar-content-sidebar .content,
    .sidebar-content-sidebar .content-sidebar-wrap,
    .sidebar-primary,
    .sidebar-secondary,
    .sidebar-sidebar-content .content,
    .sidebar-sidebar-content .content-sidebar-wrap/*,
    .site-header .widget-area,
    .title-area*/ {
        width: 100%;
    }

    /*.site-header .wrap {
        padding-left: 5%;
        padding-right: 5%;
    }

    .genesis-nav-menu li,
    .header-image .title-area,
    .site-header ul.genesis-nav-menu,
    .site-header .search-form {
        float: none;
    }

    .genesis-nav-menu,
    .site-description,
    .site-header .title-area,
    .site-header .widget-area,
    .site-title {
        text-align: center;
    }

    .site-header .search-form {
        margin: 16px auto;
    }

    .js nav.nav-primary,
    .js .site-header nav  {
        display: none;
        position: relative;
    }

    .js .site-header nav .wrap {
        padding: 0;
    }

    .js nav.pagination {
        display: block;
    }

    .menu-toggle,
    .sub-menu-toggle {
        border-width: 0;
        background-color: #fff;
        color: #333;
        display: block;
        margin: 0 auto;
        overflow: hidden;
        text-align: center;
        visibility: visible;
    }

    .sub-menu-toggle:hover,
    .sub-menu-toggle:focus {
        border-width: 0;
    }

    .menu-toggle {
        border-top: 1px solid #eee;
        line-height: 20px;
        position: relative;
        right: 0;
        z-index: 1000;
        width: 100%;
    }

    .site-header .menu-toggle {
        border: 0;
    }

    .menu-toggle:before,
    .menu-toggle.activated:before {
        margin-right: 10px;
        text-rendering: auto;
        -webkit-transform: translate(0, 0);
        -ms-transform:     translate(0, 0);
        transform:         translate(0, 0);
    }

    .sub-menu-toggle {
        float: right;
        padding: 10px;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 100;
    }

    .sub-menu-toggle:before {
        display: inline-block;
        text-rendering: auto;
        -webkit-transform: translate(0, 0);
        -ms-transform:     translate(0, 0);
        transform:         translate(0, 0);
    }

    .sub-menu-toggle.activated:before {
        content: "\f142";
    }

    .js .nav-primary .genesis-nav-menu .menu-item,
    .js .site-header .genesis-nav-menu .menu-item {
        display: block;
        float: none;
        margin: 1px 0;
        position: relative;
        text-align: left;
    }

    .js .genesis-nav-menu .menu-item:hover {
        position: relative;
    }

    .js .nav-primary .genesis-nav-menu .menu-item a,
    .js .site-header .genesis-nav-menu .menu-item a {
        border: none;
        padding: 12px 0;
        width: 100%;
    }

    .js .genesis-nav-menu .sub-menu {
        border: none;
    }

    .js .genesis-nav-menu .menu-item > a:focus ul.sub-menu,
    .js .genesis-nav-menu .menu-item > a:focus ul.sub-menu .sub-menu {
        left: 0;
        margin-left: 0;
    }

    .js .genesis-nav-menu > .menu-item-has-children > a:after {
        content: none;
    }

    .js .genesis-nav-menu .sub-menu {
        clear: both;
        display: none;
        margin: 0;
        opacity: 1;
        padding-left: 15px;
        position: static;
        width: 100%;
    }

    .js .genesis-nav-menu .sub-menu .sub-menu {
        margin: 0;
    }

    .js nav button:hover,
    .js .menu-toggle:hover,
    .js .nav-primary {
        background-color: #fff;
        color: #000;
    }

    .js nav button:focus,
    .js .menu-toggle:focus {
        background-color: #fff;
        color: #c3251d;
    }

    .footer-widgets-1,
    .footer-widgets-2 {
        margin: 0 auto 40px;
    }*/

}