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

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.

Then create a new header for your site under Divi / Theme Builder and import that layout directly into the layout. Don’t try importing the layout when you can see a list of theme builder templates, but import it into a header you’ve created yourself.

It’ll look something like this (depending on your content):

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.

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…

5 Comments

  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.

    Reply
  2. Ryan

    Hi Aidan,

    Thank you for posting this article, I have been looking for this since Divi launched 4.0. I’m not sure if I’m downloading it wrong, but when I click the ‘Download Menu Layout’ I get redirected to a page with code. It does not download a json file.

    Thank you again for the post!

    Reply
    • Aidan

      Hi Ryan. Yes that’s because I can’t force the link in a Divi button to download the destination file rather than open it in the browser. However if you save the page it should save on your computer as a .json file. If not then just copy and paste the code into a plain text editing app (like Notepad on Windows) and save it as a .json file.

      Reply
    • Aidan

      Hi Colin. The layout is a section rather than a theme builder layout, so try creating a theme builder header, open it then import the file in the editor there.

      Reply

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.