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


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 {
	transition: all 0.5s;
	width: 100%;
	padding: 15px 0 !important;
	background-color: rgba(0,0,0,0) !important;
.menu {
	display: block;
.menubarscrolled {
	background-color: rgba(0,0,0,0.6) !important;

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


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");}
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.

Then create a new header for your site under Divi / Theme Builder and import that layout directly into the layout.

It’ll look like this:


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.

Author: Aidan Ashby

Aidan is a web and branding designer living in Northampton, UK. He’s a cautious optimist and is loathe to discuss himself in the third person. He loves pancakes and has a perpetual desire to just be sat in the woods with his feet up in front of a bonfire.

Connect with Aidan on LinkedIn.

You may also like…

1 Comment

  1. Flash Alexander

    Nice snippet. I knew the effect I was looking for and its nice when I can Google it and here you are.


Submit a Comment

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

Sign up to receive helpful free design tips in your inbox

Sign up to receive helpful free design tips in your inbox

Join our mailing list to receive the latest blog posts and updates from our team.

Includes a free download of our Good Nook font.

Thanks, you've been subscribed.