Divi is a pretty awesome theme, I use it right here on this site with CloudCanvas, the menu on Divi come with a tonne of options but most people will stick with the standardย fixed menu which out the box is great. We wanted to make it better for the CloudCanvas website, I wanted to make the menu hide on scroll down but show when you reach the bottom of the page or scroll up again.

Lakewood uses this technique and I think it allows for a less distracted experience of the website without losing the ease of access of having the menu at the top of the screen at all times.

See it in action here

I will assume a few things before we start.

1. You understand what CSS and javascript is 2. you are using the default fixed menu on Divi

We will start with the CSS that will hide and show the menu for us:

 * Header Styles
#main-header {
 -webkit-transition: all 0.2s;
 -moz-transition: all 0.2s;
 transition: all 0.2s;

#main-header.invisible {
 opacity: 0;
 top: -1000% !important;

.et-fixed-header#main-header {
 opacity: 0;

#main-header.detached {
 position: fixed !important;
 top: 0;
 opacity: 1 !important;

The script will add in a moment will add some classes to the Divi #main-header element, the first class it will add is the .detached, this will give the menu a fixed position. The .invisible class is added as we scroll down to hide the menu, I’ve added a 0 opacity here to give a smoother transition effect and the completely hide the menu when scrolling back to the top quickly.

You can play around with these styles as you wish.

Now for the script:

<script type="text/javascript">
	$(document).ready(function() {
		 * Menu Hide
		var previousScroll = 0, // previous scroll position
		    menuOffset = 60, // height of menu (once scroll passed it, menu is hidden)
		    detachPoint = 650, // point of detach (after scroll passed it, menu is fixed)
		    hideShowOffset = 6; // scrolling value after which triggers hide/show menu
		 * on scroll hide/show menu
		$(window).scroll(function() {
		  if (!$('#main-header').hasClass('expanded')) {
		    var currentScroll = $(this).scrollTop(), // gets current scroll position
		        scrollDifference = Math.abs(currentScroll - previousScroll); // calculates how fast user is scrolling
		    // if scrolled past menu
		    if (currentScroll > menuOffset) {
		      // if scrolled past detach point add class to fix menu
		      if (currentScroll > detachPoint) {
		        if (!$('#main-header').hasClass('detached'))
		      // if scrolling faster than hideShowOffset hide/show menu
		      if (scrollDifference >= hideShowOffset) {
		        if (currentScroll > previousScroll) {
		          // scrolling down; hide menu
		          if (!$('#main-header').hasClass('invisible'))
		        } else {
		          // scrolling up; show menu
		          if ($('#main-header').hasClass('invisible'))
		    } else {
		      // only remove โ€œdetachedโ€ class if user is at the top of document (menu jump fix)
		      if (currentScroll <= 0){
		    // if user is at the bottom of document show menu
		    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
		    // replace previous scroll position with new one
		    previousScroll = currentScroll;

As this is for Divi the only part if the script you may want to change is the menuOffset, detachPoint and hideShowOffset. I added this to the footer of our site using a MU plugin but you can add it to a child theme or to the Divi intergrations tab on the theme options pages.

Resources https://alexcican.com/post/teehan-lax-navigation/ https://medium.com/@mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c#.44iho4ejc

Pin It on Pinterest