• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

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

  • CSS code to Center Genesis Primary or Secondary Nav Menu

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems