As website page builders go I think Divi is pretty decent, and now Elegant Themes have released Divi 4.0 everything’s been taken up a notch.

Before 4.0 there was only so much whole-site theme editing you could do using global modules, but Divi’s new theme builder takes Divi from being a sexy litle page builder to the full-fledged theme builder that Divi users have been crying out for for about a year.

With the theme builder comes the ability to build powerful new global headers. However IMO the new menu module is the theme builder’s biggest weakeness. To be fair ET have proven the value of the Elegant Themes subscription with their relentless development of Divi, so I wouldn’t be surprised to see Nick Roach popping up in a new video announcing upgrades to this menu module some day soon.

The problem with the new menu module is that it’s a functionality downgrade. Divi used to handle the main menu itself, providing a menu that could be set to change a bunch of properties when users scrolled down the page – things like the menu height, text and background colours, inclusion of the logo etc. That’s no more available with the new menu module, so that’s what we’re going to fix here.

For a demo of the the effect we’re looking to achieve just test the menu bar of this website. Yes it also works in IE 11!

So as Mak would say, “so without wasting a lot of time, let’s dive in and let’s get started.”

CSS

The first step is to add a bit of CSS to your stylesheet. If you don’t know where to put it read this post about child themes.

/* Scroll responsive menu */
.menubar {
position: fixed;
transition: all 0.5s;
width: 100%;
padding: 20px 0 !important;
background-color: rgba(0,0,0,0) important;
}
.menu {
display: block;
}
.menubarscrolled {
background-color: rgba(0,0,0,0.8) important;
padding: 10px 0 !important;
}

Of course feel free to adjust this or add any properties you want to be applied on scroll to the .menubarscrolled class.

jQuery

Then this little bit of jQuery is for your child theme’s functions.php file:

// Call custom JS script for Divi
function menu_js() {
    echo '<script>
	jQuery(function($){
		var menubar = $(".menubar");
		$(window).scroll(function() {    
			var scroll = $(window).scrollTop();
			if (scroll >= 200) {
				menubar.addClass("menubarscrolled");
			}
			else {
				menubar.removeClass("menubarscrolled");
			}
		});
     });</script>';
}
add_action('wp_footer', 'menu_js');

That adds or removes a CSS class you’ve added in your stylesheet from the menu, affecting what the browser displays.

The menu layout

Final step – click the button below to download a layout you can import to your theme builder’s header. That layout has the classes applied in the correct places for the code above.

It’ll look like this:

layout

Note- if you set any CSS in that header it will probably override the CSS you have set in your child theme, so only set properties there that you don’t want to specify in your CSS.

That should be about it.

Please leave a comment below if this post has helped you in any way or you have questions.

Pin It on Pinterest