Update
I’ve recently written an updated post describing how to use Divi’s sticky states to achieve this result. A much more elegant solution.
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 type="litespeed/javascript">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):
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.
Nice snippet. I knew the effect I was looking for and its nice when I can Google it and here you are.
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!
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.
Hey Aidan,
When I attempt to import the JSON file for the header (via this method: https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-theme-builder-portability-import-export-features) the loading animation spins for a second and then it shows an X and nothing happens. Any idea why this might be happening?
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.