Sub-container div class under site-container in Genesis

This tutorial provides the steps to add a sub-container HTML div class element under site-container in any theme based on the Genesis Framework.

Tested on Genesis Sample 2.6.0

The Idea:

The idea is pretty simple. I just opened the Genesis Hooks guide, Genesis Hook reference and find the location of `site-container` element.

Take the help from Genesis Visual hook and find the opening and closing location. Here, we have genesis_before_header ad genesis_after_footer. We will output a line of HTML for the opening and closing of this div.

STEP 1

Add the following snippet in child-theme/functions.php

add_action('genesis_before_header', 'designody_open_sub_container', 1);
/**
 * open sub-container
 */
function designody_open_sub_container() {
    echo '<div class="sub-container">';
}

add_action('genesis_after_footer', 'designody_close_sub_container', 20);
/**
 * close sub-container
 */
function designody_close_sub_container() {
    echo '</div>';
}

You can change the priority from 1 to high depending on the additional HTML.

STEP 2

Add the following CSS in child-theme/style.css

.sub-container {
    overflow: hidden;
}