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.
![](https://i0.wp.com/sridharkatakam.com/wp-content/uploads/2019/01/genesis-title-area-header-right-primary-nav..jpg?fit=1024%2C341&ssl=1)
![](https://i2.wp.com/sridharkatakam.com/wp-content/uploads/2019/01/Screen-Shot-2019-01-25-at-10.44.27-pm.png?fit=1024%2C272&ssl=1)
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.