Centered image logo with right widget area in Genesis

Posted on

In Genesis Facebook group a user asked:

is there a way to use a centered image logo in the header with a right header widget widget and still have the logo centered on the page?

One way this can be done is by setting the title area to not float left followed by setting auto width for header right widget area.

This tutorial has been written for Genesis Sample 2.2.4.

Edit child theme’s style.css.

Step 1

a) Above the media queries, add

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

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

Step 2

Set the CSS that makes the header image and hamburger menu icon to trigger early at 1340px rather than at 1023px.

a) Replace

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

}

with

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

}

b)

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

}

with

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

}