Understanding the Genesis Framework Site Header Layout

A frequently asked question about the Genesis Framework and Studio Press themes is:

How do I center a logo after I've added content to the header right widget area?

To answer this question, it's important to understand how the Genesis Framework constructs its site header component. If you use your browser's inspect tool, you'll be able to examine the HTML rendered by the Genesis Framework. The code below is a typical example of a site header with an image logo.

The code is from this site and has been customized slightly for SEO purposes. The customization places the logo image in the forefront instead of in the background as Genesis generates it. For the purposes of this discussion, the image position is irrelevant. For readability, I've also removed the menu from the sample code below.

Before Header Right

In the Before Header Right layout, the width of the header div is 100% of the viewport. The wrap element controls the width of the content within the header. On this site, the wrap carries a width of 1140px. Unless you designate otherwise, this wrap dimension applies site-wide. Since the wrap only has 1 group of child elements designated as the title-area, the width of the title area fills the width of the wrap. With this configuration, it is easy to center elements within the title area because you have the entire width of the wrap available to you.

Now, examine the same header area after the header right widget area is populated.

After Header Right

Once the header right widget area has content, notice how the wrap element now has 2 groups of child elements. The title area grouping remains as before, but now you also have the second grouping starting with the div that has the classes of "widget-area header-widget-area". As a visual guide, these two areas are laid out as in this image:

As a rule, the combined widths of the child elements cannot exceed the width of the parent element. The parent element in this case is the wrap. It has a width of 1140px. The title area, after the header right widget area is populated, now has a width of 360px. The width of the header right widget area is 740px. The formula for calculating your header dimensions is wrap - (title + header right) = available space, or 1140px - (360px + 740px) = 40px. The available space between the 2 groups of child elements is a mere 40px. If you try to widen the width of either of the two child groupings beyond the remaining 40px, they will crash into each, which will force the header right area to the second line.

How to Center the Logo?

Getting back to the original question about centering the logo after content is added to the header right widget area, the answer is you can't with the default configuration. If you want to leave the logo centered, the title area has to stretch the full width of the wrap. So don't use the header right widget area if you want the logo centered.

With Genesis, there are several ways you can add content to the right of the logo and leave it centered. One of the most effective ways would be to add your additional content to the title area with an add action in functions.php. You can wrap your additional content in a div that is floated right in CSS without impacting the logo.

Another more modern method is to use CSS grid layout. To learn how, check out this article: Customize the Genesis Header with CSS Grid Layout