WP SITES

2168

Original Genesis Tutorials & 5000+ Code

Snippets

Header Right

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.

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 custom menu in site header genesis

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:

center site title and description

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

Main navigation