Sridhar Katakam

Genesis and WordPress Tutorials

Centered image logo with right widget area in Genesis

by 4 Comments

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

}

  • Last night, I made these updates to my Genesis site as closely as I could. My logo is finally centered, which is great. Thank you! However, my phone number and email address in the widget got moved from the right side of the header to closer to the center. Now everything looks off again:

    http://www.arvadaguitarlessons.com

    How do I move my contact info in the widget back to the right side of the header?

    Also, this also caused my Nav Bar (which once consisted of individual navigation links) to be truncated and turned into the drop down ‘Menu’ that’s on the site now. How do I switch it back to the way it was before?

    Thank you so much!

    Eric

    Reply

    • How do I move my contact info in the widget back to the right side of the header?

      Looks ok to me when viewed at desktop width.

      Also, this also caused my Nav Bar (which once consisted of individual navigation links) to be truncated and turned into the drop down ‘Menu’ that’s on the site now. How do I switch it back to the way it was before?

      Inside genesis_sample_enqueue_scripts_styles() locate

      $suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
wp_enqueue_script( 'genesis-sample-responsive-menu', get_stylesheet_directory_uri() . "/js/responsive-menus{$suffix}.js", array( 'jquery' ), CHILD_THEME_VERSION, true );
wp_localize_script(
    'genesis-sample-responsive-menu',
    'genesis_responsive_menu',
    genesis_sample_responsive_menu_settings()
);

      and comment it out or delete it.

      Reply
    • >