How to add widgets above the navigation in Genesis Sample

This tutorial provides the steps to display the widgets placed inside Header Right widget area (after it is activated) above the primary navigation menu in Genesis Sample.

We shall wrap the Header Right widget area and primary nav in a custom div and use Flexbox for styling the header.

Sample HTML markup:

Mobile:

Tested in Genesis Sample 2.6.0.

Step 1

Edit functions.php.

a) Comment out or delete

unregister_sidebar( 'header-right' );

b) Let's use the genesis_markup_header-widget-area_open dynamic filter hook to add a opening tag for a custom div.header-right before div.header-widget-area.

At the end of the file, add