A Yates Design Divi Tutorial

The bottom-aligned menu that sticks to the top when you scroll.

This is the best title I could come up with.

Watch puppy videosView the tutorial

Divi Tutorial – the bottom-aligned menu that sticks to the top when you scroll.

Apr 1, 2016

Update! The plugin Sticky Menu (or Anything!) made some changes in version 2.0 which broke the effect in this tutorial. I’ve updated the tutorial below to reflect those changes. If it’s broken your site you need to enable Legacy mode in the plugin’s settings and change the CSS code from #main-header.original to #main-header.sticky-element-original. After that everything should work the same.

This is a page layout I’ve wanted to try and figure out ever since I came across the BrewLife website on Divi Theme Examples. The BrewLife site works on all screen sizes but I’m only going to enable this version on screen sizes greater than 981px. The reason for this is that the default Divi mobile menu expands downward on click which won’t work with this layout. The way the BrewLife site has solved this is by swapping the Divi mobile menu for an off-canvas mobile menu.

The tutorial will also only be enabled for the homepage of your site. If you want to enable it on different pages just adjust the “body.home” references.

OK! On to the tutorial.

Step 1

Disable fixed navigation bar in the Divi Theme Options.

Step 2

Install & activate the excellent Sticky Menu (or Anything!) on Scroll plugin. Once you’ve got that activated use these settings:

Set Sticky Element: * ? to: #main-header

Set “Do not stick element when screen smaller than: (optional) ?” to: 981 pixels.

In the Advanced Settings tab, enable Legacy Mode.

Step 3

Add a Fullwidth Section to the top of your page & then add a Fullwidth Header Module with these settings:

Change Make Fulllscreen to Yes

In the Custom CSS tab add this to the Main Element section:


padding: 0 !important;

Add a title, subtitle, buttons, backgrounds & text as you see fit for the module.

Step 4

Add the following to your page’s Custom CSS. In Divi 2.7 you can add Custom CSS to individual pages by clicking the hamburger icon at the top of The Divi Builder.


@media only screen and ( min-width: 981px ) {
 #main-header.sticky-element-original {
 position: absolute;
 bottom: 0;
 top: auto !important;
 }
 .et_header_style_left .logo_container {
 left: 0;
 }

#logo {
 padding-left: 30px;
 }
}

Step 5

Add some more content to your page. In the first section after the fullwidth header you’ll need to add some extra padding to make up for some of the above adjustments. I’ve set the top padding of this section to be 10%.

Step 6

giphy

That’s it! I’d love to hear about any successes or failures you have with this. Email me at hello@yatesdesign.com.au.

Thanks for reading!

If you found this post helpful you can show your appreciation by leaving a review on the Yates Design Facebook page:

If you need help...

I am available for hire! No matter how big or small your project is, I’d love to hear about it. All quotes are obligation free.

Drop me an email at hello@yatesdesign.com.au to discuss.

Ready to launch a new project? Let's work together 

Like this post? Subscribe!

Like this post? Subscribe!

Sign up to the Yates Design newsletter & receive news, tips & tricks about how to improve the online presence of your business.

You have Successfully Subscribed!

Pin It on Pinterest