• Skip to main content

Victor Font Consulting Group, LLC

Digital Business Strategists

Call Us:

+1 919-604-5828

  • Home
  • Care Plans
    • Care Articles
    • Optional Subscriptions
  • Consultations
  • Products
    • Code Snippets
    • Public GitHub Repositories
    • Gist Snippets
    • Pastebin Snippets (Free)
    • Free Plugins
  • FAQs
  • Support
    • Graphic Design
  • Contact
    • Speakers
    • Portfolio
  • Resources
    • Free WordPress Video Training
    • Tutorials
    • Articles
    • Cybersecurity
    • EU Referral Network
You are here: Home / Computers and Internet / Programming / WordPress / Child Themes / Understanding the Genesis Framework Site Header Layout

Understanding the Genesis Framework Site Header Layout

By Victor M. Font Jr.
March 21, 20171 Comment

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:

Genesis Framework Header Layout

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

  • 12shares
  • Facebook4
  • Twitter0
  • Pinterest4
  • LinkedIn2
  • Print
  • SMS0

About Victor M. Font Jr.

Victor M. Font Jr. is an award winning author, entrepreneur, and Senior IT Executive. A Founding Board Member of the North Carolina Executive Roundtable, he has served on the Board of Advisors, of the North Carolina Technology Association, the International Institute of Business Analysis, Association of Information Technology Professionals, Toastmasters International, and the North Carolina Commission for Mental Health, Developmental Disabilities, and Substance Abuse Services. He is author of several books including The Ultimate Guide to the SDLC and Winning With WordPress Basics, and Cybersecurity.

Reader Interactions

VictorFont.com runs on the Genesis Framework

Genesis FrameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple—start using Genesis now!

Click here to download The Genesis Guide for Absolute Beginners (PDF - 1.4 MB)

Leave a Reply to Sam Cancel reply

Your email address and website will not be published. Required fields are marked *
Posting a comment means that you agree with and accept our Comment & Product Review Policy

Comments

  1. Sam

    October 1, 2019 at 10:06 am

    Hey..

    i am using Agency pro, I made a change at home top area with simple hooks contents, however, it does not fit the width in mobile .. how i can fix it..

    Thanks

    Reply

Call: +1 919-604-5828

Send us an E-mail

Accessibility Statement | Affiliate Marketing Disclosure | Capability Statement

Cookie Policy | Comment & Product Review Policy | Privacy Policy | Site Map | Terms & Conditions

Copyright © 2003–2022 Victor M. Font Jr.

Return to top of page
Posting....