Sridhar Katakam

Genesis and WordPress Tutorials

Title Area at left, Header Right widget area at right with Primary Nav below centered in Genesis Sample

by Leave a Comment

This members-only tutorial provides the steps to customize Genesis Sample to arrange title area at left and Header Right widget area at the right in a custom div.header-top with the primary nav appearing below centered.

Sample HTML markup

Tested in Genesis Sample 2.8.

Step 1

Edit Genesis Sample's functions.php.

Let's remove the code that unregisters Header Right widget area.

Comment out or delete

unregister_sidebar( 'header-right' );

Step 2

Install and activate the following custom functionality plugin.

Here's what the plugin does:

  • Adds <div class="header-top"> above div.title-area.
  • Adds </div> below div.header-widget-area.
  • Removes primary nav menu's wrap.
  • Loads a custom CSS file in which we use Flexbox to position the title area and header right widget area.

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

>