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