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.


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 *.

We may earn a commission when you visit links on our website.