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

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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

  • Center Site Header Elements On The Same Line
  • 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

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.