In this tutorial I’ll show how to show/hide Divi header bar depending on page scroll direction. The header will hide while the page is being scrolled down, and will show up only when the page starts scrolling up.

Table of Contents

1. Demo
2. Why Show/Hide The Header On Scroll?
3. Implementation
4. Step 1. Enable Divi Fixed Navigation
5. Step 2. Show/Hide The Header Smoothly
6. Step 3. Add The Effect Custom CSS
7. Step 4. Add The Effect Custom JS
8. Step 5. Configure The Show/Hide Effect Features
   • Set A Minimum Scroll Amount
   • Delay The Effect
   • Close Mobile Dropdown Menu When Scrolling Starts
9. Conclusion

Demo

Why Show/Hide The Header On Scroll?

Inline headers move out of the viewport when the page is scrolled down and in order to navigate to other pages users have to scroll all the way up to click the other menu links.

This is not the best user experience and one of the solutions to improve it is to make the header fixed so that it always stays in the viewport while the page is being scrolled.

This allows the users to navigate through website without having to scroll the page all the way up every time they need to use the navigation.

However, a fixed header comes with its own disadvantage too – it covers a portion of the page content which can be a considerable issue for small mobile devices screens, especially if the header bar is thick (like the Divi theme Centered header style on mobile).

So, to prevent this there is a need for a “hybrid” header which would be fixed but move out of the viewport while the page is being scrolled down and appear only when the visitor starts scrolling the page up.

And this is what we are going to implement now.

Implementation

To implement this functionality we will use a little bit of CSS to make the header fixed on mobile devices, and also make it show/hide smoothly when the page is being scrolled up and down.

The scroll direction detection and showing/hiding the header will be implemented using jQuery.

So, let’s do that in a few simple steps as explained below.

Step 1. Enable Divi Fixed Navigation

We need the header to be fixed, so, enable the Fixed Navigation Bar option in Divi Theme Options.

However, this will make fixed only the desktop menu but we need to make divi mobile menu fixed as well.

And we can do that using the following simple CSS:

@media all and (max-width: 980px){
  /* make mobile header fixed */
  #main-header,
  #top-header {
    position: fixed;
  }
}

Step 2. Show/Hide The Header Smoothly

The header should move in and out of the viewport on scroll smoothly, so, we need to apply transitions accordingly. Here is the CSS:

/* show/hide the main and top header smoothly */
#main-header,
#top-header {
  transition: top .3s ease;
}

Step 3. Add The Effect Custom CSS

Combine both CSS snippets provided above and add it into Divi Theme Options -> General -> Custom CSS field.

Alternatively, if you are using a child theme then you can add the CSS into the child theme’s style.css file.

/* Show / Hide Divi Header Depending On Page Scroll Direction */

@media all and (max-width: 980px){
  /* make mobile header fixed */
  #main-header,
  #top-header {
    position: fixed;
  }
}
/* show/hide the main and top header smoothly */
#main-header,
#top-header {
  transition: top .3s ease;
}

/* Show / Hide Divi Header Depending On Page Scroll Direction */

Step 4. Add The Effect Custom JS

Next step is to add the effect’s JS code in Divi Theme Options -> Integration field. Make sure it’s enclosed in script tags.

<script type="text/javascript">
(function($){
    $(window).load(function(){
        let minScroll = 5,
            interval = 0,
            closeDropdownOnScroll = true,
            didScroll,
            lastScrollTop = $(document).scrollTop(),
            topHeader = $('#top-header'),
            mainHeaderHeight = $('#main-header').outerHeight(),
            topHeaderHeight = topHeader.length ? $('#top-header').outerHeight() : 0,
            mainHeaderTopOffset = mainHeaderHeight + topHeaderHeight;

        $(window).scroll(function(e){
            didScroll = true;
            if(closeDropdownOnScroll){
                closeDropdownMenu();
            }
        });
            
        setInterval(function(){
            if (didScroll){
                hasScrolled();
                didScroll = false;
            }
        }, interval);
        
        /**
         * Close dropdown menu
         */ 
        function closeDropdownMenu(){
            $("#main-header .mobile_nav.opened .mobile_menu_bar_toggle").trigger("click");
        }

        /**
         * Show/hide header
         */      
        function hasScrolled(){
            let scrollTop = $(this).scrollTop();
            
            // Make sure the scrolled amount is more than minScroll
            if(Math.abs(lastScrollTop - scrollTop) <= minScroll)
                return;
            
            // If the page's been scrolled down by more than the header height - hide the header.
            if (scrollTop > lastScrollTop && scrollTop > mainHeaderTopOffset){
                // Hide the main header
                $('#main-header').removeClass('nav-down').addClass('nav-up');
                $('#main-header.nav-up').css({'top' : `-${mainHeaderTopOffset}px`});

                // Hide the top header (if exists)
                if(topHeader.length){
                    $('#top-header').removeClass('nav-down').addClass('nav-up');
                    $('#top-header.nav-up').css({'top' : `-${topHeaderHeight}px`});
                }
                
            } else {
                // Show the header when scrolling up
                if(scrollTop + $(window).height() < $(document).height()){
                    // Show the main header
                    $('#main-header').removeClass('nav-up').addClass('nav-down');
                    $('#main-header.nav-down').css({'top' : `${topHeaderHeight}px`});

                    // Show the top header (if exists)
                    if(topHeader.length){
                        $('#top-header').removeClass('nav-up').addClass('nav-down');
                        $('#top-header.nav-down').css({'top' : `0px`});
                    }
                }
            }
            
            // Update the last scroll position
            lastScrollTop = scrollTop;
        }
    });	  
})(jQuery); 
</script>

This jQuery snippet detects page scrolling direction and shows/hides the header bar accordingly, depending on the configurations applied (read below).

Additionally, if the mobile dropdown menu is open when the page is scrolled up, it will close the dropdown menu so that the user can continue browsing the page content without having to close the dropdown menu manually.

And, finally, if the pages is scrolled down the open mobile dropdown menu will again get closed automatically, and the header bar will move out of the viewport.

Step 5. Configure The Show/Hide Effect Features

By default the effect will trigger as soon as user starts scrolling the page without any delay and scroll amount requirements. And closing the open mobile menu automatically is enabled.

However, you can configure these features to your linking using the following variables: minScroll, interval, closeDropdownOnScroll.

Set A Minimum Scroll Amount

Use the minScroll varible to set the minimum amount to be scrolled before the effect takes place.

For example, if it is set to 250 then the header will be hidden only after the page has been scrolled down by at least 250px (default: 5)

Delay The Effect

Use the interval variable to delay the effect by specified amount of time (in ms) after the scrolling starts.

By default the effect is triggered immediately when the scrolling starts (default: 0).

Close Mobile Dropdown Menu When Scrolling Starts

Use the closeDropdownOnScroll variable to enable/disable the automatic closing of the open mobile dropdown menu feature.

Set it to true if you want the menu to close automatically, otherwise set it to false (default: true).

Conclusion

By following these steps you can enhance your Divi website’s navigation experience (especially on mobile devices) by creating a header that adapts dynamically to user behavior.

This show/hide effect not only improves site usability by maximizing screen space but also maintains easy access to the site navigation when needed.

Try implementing this feature to make your site more user-friendly and responsive to visitor interactions. Also, feel free to experiment with the settings to suit your specific design needs.

And don’t hesitate to share your thoughts and ask questions(if any) in the comments section below.