Create Minimalistic Mobile Menu with Divi

Let’s face it – Divi’s mobile menu is boring. No matter how well designed your Divi website is, the default mobile menu that the Divi theme uses will always give it away. It just doesn’t look that good. Some people have some success using CSS to make basic customizations to make the mobile menu look a little nicer. In this WordPress CSS tutorial, I’m going to be sharing with you three original designs I came up with to spruce up your Divi mobile menu. Enjoy!

The code I will be sharing below is pure CSS. That’s right. No custom JavaScript, no plugins, no nothing. All these designs for your website’s mobile menu are achievable with just a few (dozen) lines of CSS code. I purposefully wrote the code as lean as possible. Those who know me will know I am a major speed geek when it comes to my websites. I like using as little code as possible when customizing my Divi websites.

Awesome! How do I add this code to my Divi website?

I always recommend using a child theme. There are a bunch of guides on how to make a Divi child theme floating around the internet, a couple of free tools to generate one and a bunch of places to buy a premium one. Take your pick. Regardless of what you choose, I always always recommend using a child theme and the accompanying stylesheet when customizing the Divi theme. It’s just good practice.

If, for whatever reason, you decide you don’t want to use a Divi child theme, you can always just copy and paste the code into the Theme Customizer → Custom CSS field. It’s not the best way of adding custom CSS, but it can get the job done.

Here’s a good tool for generating a free Divi child theme.

Can I use these Divi menu designs with a million links?

Yes and no. I created these designs using flexbox in order to align the links to either the middle or bottom. Problem is they don’t work very well with overflowing content.

There is a way around it, of course. Instead of display: flex, you can use display: block. Doing so will allow the menu to work better with overflow content, but you will lose the alignment of the links.

To move the links down a bit, you can use code like this:

The link animations can be altered to work with more links by adding extra code to control the animations delays, like so:

I added animation code for up to 6 links, but if you really do have a million links like I know some Divi sites do (you know who you are), you can add animations to all of them with this trick.

Where did you get that background image in your designs?

I took that photo. Just in case you were curious. I personally don’t like using stock photo sites for personal projects. If I can, I try to take the photographs myself. Please do not hotlink my images. Use your own, there are millions of places to get free photos these days.

The Basics

Here’s the starting point. All three of my custom Divi mobile menu designs rely on this base styling to:
a) Make them fullscreen
b) Hide them when closed
c) Reveal them when you tap on the hamburger icon.
d) Change the menu icon to a X when open, so users know where to click to close it.

Keep this particular piece of code in mind.

You will need to specify the URL for the background image you want to use.

If you’d rather use solid color instead of a background image, you can switch it out for:

That will set it to a solid black background color. Feel free to play around with it.

1

Fullscreen Divi Menu with Links Aligned to the Bottom

First step here is we’re going to change some code in the previous part. Woops. Simple thing really, just swap justify-content: center; for justify-content: flex-end; .

This will position the links at the bottom of the menu.

Also, bit of a warning. This first style uses flex-box to position the links at the bottom of the menu. The problem here is that it doesn’t work very well with overflow contents, hence you should only use this style if you have a truly simplistic menu.

5 or 6 links at most.

2

Fullscreen Divi Menu with a Fade In/Up Effect

This is a simple menu design I came up with that uses CSS transition delays to stagger the fade effect on the links so they appear one after the other, instead of all at once. The menu itself also fades in and up in the same direction as the links, which I think is a nice compliment. 🙂

3

Simplistic, Fullscreen Divi Menu with Minimalistic Fade In Effect

This design is for ya’ll who want a super simple, no frills Divi mobile menu. Just fade in/out.

Looks particularly good for minimalistic websites that want something that isn’t too explosive. 😛

4

Fullscreen Divi Menu with a Slide In Effect

Last one!

This last one has an interesting “parallax” effect, as you can see in the GIF.

Bonus: Preventing the <body> from scrolling while the Divi mobile menu is open

The normal behaviour is that the body content will continue to scroll even when the Divi mobile menu is open. To prevent that, you can add this piece of Javascript to the Theme Integrations → <body> area.

Then add this piece of CSS wherever you add CSS:

That should disable the <body> from scrolling, although iOS devices don’t respect the overflow property, so this doesn’t work on iOS devices.

To making the boring Divi mobile menu less boring

Divi’s mobile menu really kinda sucks. Some have had some good luck with it, others don’t really care and just leave it at the default setting. Hopefully this tutorial helped you with customizing your Divi menu a bit, so it’s not that boring. As you can probably tell, I really don’t like that mobile menu.

If you took my advice and used my code as a base to create a custom design, comment below! I’d like to see what custom designs for the Divi menu you can come up with! Or even if you just copied and pasted, comment below. I like to see my work be appreciated and used!

For more awesome tutorials and freebies please sign up to our newsletter list →

Ethan Chin

Ethan Chin

Ethan is a self-taught web developer who enjoys experimenting with code a lot. In his free time he can be found playing with PHP and Javascript to create cool stuff for the web. When he isn't coding, he can often be found photographing beautiful landscapes around the world.

To celebrate the launch of Divi Testimonial Slider 1.5, we're giving away 15% off. Get advantage of this special offer before it's too late!
Use coupon code SLIDER15 at checkout!

18 Comments

  1. Maddy

    I would love to know how you do the one on this site in addition to the way it sticks on scroll

    Reply
    • Ethan Chin

      I didn’t code the menu for this site. But looking at it, I would imagine it is using CSS fixed positioning to make the menu button stay on scroll.

      Reply
  2. Robert

    Divi WP theme is an awesome WP theme in both overall design and functionality — but I’ve always cringed at their mobile menu. Your mobile menu styling tutorial / tips in this post go a very long way to solve this Divi shortcoming.

    Thank you so much for this brilliant tutorial.

    Reply
  3. Steven

    Hi Ethan, this is ace! Amazing mobile menus without a plugin, just how I like it!
    Thanks a million!

    Steven

    Reply
  4. Elisandro

    Amazing tutorial, Ethan! Congrats!

    Reply
  5. Shane

    I like the fact you can insert your own background image into the mobile menu.

    Reply
  6. Dominic de Souza

    This is an awesome tut. Was trying it for a sideproject, and ended up using it on my main site. 😀

    Reply
  7. Zaid

    Thanks Ethan for an awesome tutorial! How do I add color to the Active mobile link? thanks

    Reply
  8. Marty

    Awesome menus!
    Menu opening transition works only first time, closing transition works everytime.
    Any ideas how to fix it?

    Reply
    • Ethan Chin

      I updated the code. It should work now.

      Reply
  9. Pawlik

    Hi, it looks like there is a little bug when the menu gets bigger with a submenu. Submenu get a huge margin or padding over it’s head. Could you please check it? Is there any way to fix it? I would appreciate it 🙂

    Reply
    • Ethan Chin

      I mainly designed my code to work with minimalistic menus, so I didn’t really test it on sites with large submenus.

      Reply
  10. Jae

    This an excellent piece of work. I commend you!

    However, I have a few issues:

    1) I’m not seeing the ‘X’ to close the menu. (Actually, when the menu is open, I’m not seeing any kind of icon to close it.)

    2) How can I change the text color of the menu items.

    3) I have opted to do set my page template to ‘blank’ and use the Full Width Menu module, instead. (I’ve done this so I can add my own mega-menu for desktop.) However, your CSS only works on the in-built top bar menu (which my pages won’t have, as they’re set to page template ‘blank’.) So, my question is, how can I change this to make it work on the Full Width Menu module as well as/instead of, please?

    Many thanks.

    Reply
    • Jesus

      I had the same issues and i found this following code for the text:

      .opened #mobile_menu a {
      color: #EE3307;
      font-size: 24px;
      }

      And can’t make the “X” thing too 🙁

      Reply
      • Jesús

        Done!

        I added the mobile code and a Z-index to this part:

        @media only screen and (max-width: 980px) {

        .mobile_nav.opened .mobile_menu_bar:before {
        content: ‘\4d’;
        color: #EE3307;
        transition: all ease-in-out 300ms;
        z-index: 11;
        }

        }

        Reply
  11. Maksym

    Hello,
    Great article, thank you!
    However, I have the same issues as Jae:
    1. When I change a view from desktop to mobile, it automatically shows me a mobile menu (instead of showing hamburger and then see the result after clicking on it)
    2. I also can’t see the close icon (it seems it somewhere behind the menu because I’m moving the cursor and can’t even click on it)

    Please, fix the code 🙂

    Reply
  12. Jesus

    Great tutorial! I really love it!

    I did but isn’t working well, just de X close btn doesn’t work.
    Somebody know whats wrong?

    url: https://backtoraw.mx/inicio/

    Reply
  13. Drew

    I have a Mega Menu and want to specify an entirely different menu. Any pointers? How can I use my secondary menu?

    Reply

Submit a Comment

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

Pin It on Pinterest

This site uses Cookies to improve your online experience. By continuing to use this site without changing your cookie preferences we will assume that you are agreeing to our use of cookies. For more information visit ourPrivacy Policy.
Understood