Center Custom Menu In Site Header Widget of Genesis Sample Theme

This solution shows you how to center the header right widget area populated with a custom menu.

Here’s the default.

Under the Title Area section around Line 877 of your child themes style.css file, change the CSS to this:

.title-area {
    display: none;
}

Under the Widget Area section around Line 923 of your child themes style.css file, change the CSS to this:

.site-header .widget-area {
    float: none;
    text-align: center;
    width: 100%;
}

Here’s what the CSS modifications result in:

Center Title & Description

You could also align your title & description text center by changing the CSS under the Title Area section around Line 877 of your child themes style.css file, change the CSS to this:

.title-area {
    width: 100%;
    text-align: center;
}

Here’s what this will look like:

If you’re using a logo rather than text, you could center your image by modifying the CSS for the header image around Line 896 of your child themes style.css file, change the CSS to this:

.header-image .site-header .wrap {
    background: url(images/logo.png);
    background-repeat: no-repeat;
    background-position: center; 
    width: 100%;
}

Here’s another way to center your logo when using the Genesis Sample child theme by StudioPress.

Related Tutorials

• Center Site Header Elements On The Same Line
• CSS code to Center Genesis Primary or Secondary Nav Menu