Hide Divi Fixed Header on a Particular Section


Divi allows the default header to be made into a "fixed" header that remains visible as you scroll down the page. If you'd like to temporarily hide the Divi header as you scroll past a particular section, here's how to do it.

Fixed header shown while scrolling…

… but hidden on a specific section

Hide Divi header when scrolling past a specific section using jQuery

To hide the fixed header when scrolling down a specific section, we can use a bit of JavaScript / jQuery.

First, add a class named "hide-header-section" to the section where you want the header to disappear, at:

Section Settings > Advanced > CSS ID & Classes > CSS Class

Then add this jQuery script to your site:

    var section = $('.hide-header-section'); // replace with your section ID or class
    var header = $('#main-header');
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        var offset = section.offset().top;
        var height = section.height();
        if (scroll > offset && scroll < offset + height) {
        } else {

This script will listen for the scroll event and check if the user's scroll position is within the section. If it is, it will add the 'hide-header' class to the header; if it isn't, it removes the class.

Next, add this CSS to your site to hide the header when the 'hide-header' class is added:

#main-header.hide-header {
    display: none !important;

Now you should see the header normally as you're scrolling down, but when you scroll past this particular section, the header will temporarily be hidden.

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin


Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.