How To Make Divi Mobile Menu Sticky

What To Expect From This post:

1) The benefits of having a sticky mobile menu. 2) Where to add your CSS. 3) The CSS code snippet that will make your mobile menu sticky.

Let’s Make Our Mobile Menu Sticky!

In this post, I am going to show you how to make Divi mobile menu sticky, by adding a simple piece of CSS code to your website.

The default settings for the Divi mobile menu is that the menu “disappears” when you scroll down the page (ie. it doesn’t stick to the top of the screen).

The main reason that you might want to make your mobile menu sticky (ie. always visible) is that it offers your visitors the ability to quickly access other pages/posts from your website, without needing to scroll back to the top of the page.

So…

Without further ado…

Let’s do this shit wink

1) Navigate To “Custom CSS” 

In the sidebar menu on your WordPress dashboard, navigate to the Divi Custom CSS section.

Divi > Theme Options > Scroll down to the bottom and find the section that’s called “CUSTOM CSS”.

This is where we will paste our CSS code snippet.

This is what the section looks like.

2) Paste the following code

@media only screen and (max-width: 980px) {
.et_fixed_nav #main-header,
.et_fixed_nav #top-header,
.et_non_fixed_nav.et_transparent_nav #main-header,
.et_non_fixed_nav.et_transparent_nav #top-header {
position: fixed;
}
}
.et_mobile_menu {
overflow: scroll !important;
max-height: 80vh;
}

Need A Website?

We specialize in designing highly professional websites for small to medium-sized businesses at an affordable cost.

Only pay us for the job once you are 100% satisfied with your new website.

We offer a lifetime after-sale support service for all of our customers.

3) Don’t Forget To Save

Once you have added the CSS code, you can click save.

and… TADA!

That’s it. Now you know how to make Divi mobile menu sticky with a small piece of CSS code.

DIVI Tutorials

For more useful Divi tutorials just like this one, go check out our Blog page where you’ll find a whole bunch of awesome goodies, to help make your website friggen AWESOME!

Newsletter

Subscribe to our newsletter if you would like to join our mailing list where you will receive things like specials, giveaways, and news. Don’t worry, we will NEVER send you any spam.

0 Comments

Submit a Comment

Your email address will not be published.