How to stop page content from “dancing down” after load, when the DIVI header is transparent.

When we make the header transparent through DIVI theme customize, then we have the content page “dancing” down after page load, as a script is adding top padding.
We can prevent that with the CSS code below.

Code is also including a fix for the footer WHEN you use a Footer with the theme builder.
If you do not use the footer on theme builder, just remove the footer selector.

/* Stop Dancing of page content when header is transparent
============================================================ */
@media (min-width: 981px) {
  #main-content .container {
    padding-top: 216px !important;
  }
  .et_pb_section:first-child { 
      padding-top: 216px!important; 
    }  
    footer .et_pb_section:first-child {
    padding-top: 30px !important;
    }
}
@media (max-width: 981px) {
  #main-content .container {
    padding-top: 100px !important;
  }
    .et_pb_section:first-child { 
     padding-top: 100px !important; 
    }
    footer .et_pb_section:first-child {
    padding-top: 60px !important;
    }
  
}
Scroll to Top