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; }