The Divi theme offers by default 2 header areas, the main and the top header, with tons of possible customizations, but what if you want more, what if you need a widget area under the main header?
A simple way to add elements under the main navigation menu is to add a widget area, where you can add any block or widget you want or need.
It’s very simple, just add the following code at the end of the functions.php file of the Divi child theme:
/* Widget area under Divi header */
// Create new widget area
function wphelp_widget_area() {
register_sidebar(array(
'name' => 'Header',
'id' => 'wphelp-widget-area',
'before_widget' => '<div id="%1$s" class="et_pb_widget %2$s">',
'after_widget' => '</div> <!-- end .et_pb_widget -->',
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
));
}
add_action('widgets_init', 'wphelp_widget_area');
// Create the are and place it where it will appear
function wphelp_footer() { ?>
<div id="wphelp-widget-area-wrap">
<?php dynamic_sidebar('wphelp-widget-area'); ?>
</div>
<script>
jQuery(function($){
$("#et-top-navigation").after($("#wphelp-widget-area-wrap"));
$("#wphelp-widget-area-wrap").show();
});
</script>
<?php
}
add_action('wp_footer', 'wphelp_footer');
// Adjust the widget to fit on the header
function wphelp_css() { ?>
<style>
#wphelp-widget-area-wrap {
display:none;
float:right;
max-width: 500px;
clear:right;
position:relative;
}
#wphelp-widget-area-wrap .et_pb_widget { margin-right:0px }
#wphelp-widget-area-wrap .et_pb_widget:last-child { margin-bottom: 18px; }
.et-fixed-header #wphelp-widget-area-wrap .et_pb_widget:last-child { margin-bottom: 10px; }
@media only screen and ( max-width: 980px ) {
#wphelp-widget-area-wrap .et_pb_widget:last-child { margin-bottom: 0px; }
}
@media only screen and ( max-width: 768px ) {
#wphelp-widget-area-wrap .et_pb_widget:first-child { margin-top: 18px; }
}
</style>
<?php
}
add_action('wp_head', 'wphelp_css');Code language: JavaScript (javascript)Save the changes and you can now go to the “Appearance → Widgets” section or the customizer and start adding widgets or blocks to the new widget area under the main header navigation menu of the Divi theme, to the new widget area called “Header“.
