Webinar Replay: Headers Under Heroes in Divi

Webinar Replay: Headers Under Heroes in Divi
In this video, using CSS and a few lines of jQuery, we will show you how to dynamically place Divi’s main header and navigation below the first Hero section and then make it stick to the top when the page is scrolled. In addition, the navigation will be adjusted to open upwards before the page is scrolled and then downwards after scroll. This effect is easy to achieve and will set your website well apart from the rest with a unique style and functionality that your clients and website visitors will love.



The jQuery code:

jQuery( document ).ready(function($) {

$(".home .et_pb_section:first-of-type").insertBefore("#main-header");
$(".home #page-container").addClass("open-up");

$('.home #main-header').waypoint(function() {
$('.home #page-container').toggleClass('open-up');
}, {offset: '50%'});


The CSS:

.home #main-header {
position: static;

.home #main-header.et-fixed-header {
position: fixed;

.home #page-container {
padding-top: 0 !important;

.home .open-up #top-menu li ul {
top: initial;
bottom: 100%;
border-top: none;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #2ea3f2;
-webkit-box-shadow: 2px -2px 5px rgba(0,0,0,.1);
-moz-box-shadow: 2px -2px 5px rgba(0,0,0,.1);
box-shadow: 2px -2px 5px rgba(0,0,0,.1);
margin-bottom: 30px;

.home #top-menu .menu-item-has-children>a:first-child {
padding-top: 30px;
margin-top: -30px;

.home #top-menu .menu-item-has-children>a:first-child:after {
top: 30px;


The Headers Under Heroes webinar was just a small taste of the incredible knowledge that SJ James has. As one of the trailblazers in the Divi community, SJ James has years of experience with the Divi framework and certainly knows how to work well with it.



If you loved the content of the webinar and loved learning from SJ, then we have some great news for you!

Divi Space has just launched the Transforming Divi with CSS & jQuery Course! Grab your seat, the course will open on the first of May (early bird discount below), and we’d love for you to join us! Here is a sneak peek of whats included in the course:

  • Private Facebook Group
  • Introduction to CSS
  • Introduction to Jquery
  • Five real world examples where custom CSS has been used to make Divi better
  • The jQuery Cheat Sheet
  • Moving & Replacing with jQuery
  • Preparing a child theme for jQuery & CSS
  • Bonus: Inserting Layouts in Template Pages
  • Bonus: Editing Modules

For a limited time, you can grab an EARLY BIRD DISCOUNT of 20% OFF the course with the Transforming20. Simply enter the code at the checkout and the discount will automatically apply!

Here you can create the content that will be used within the module.