How To Customize and Style The Divi Mobile Menu With CSS Tutorial by Pee Aye Creative

How To Customize And Style The Divi Mobile Menu

In this Divi tutorial, I'm going to show you how to customize and style the the Divi mobile menu with CSS using the Menu module.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

Here is an example of how the Divi Menu module looks by default on mobile:

the mobile menu with the regular menu default styles

Here is an example of how the Divi Menu module looks by default on mobile:

the mobile menu with the Menu module in the Theme Builder default styles

Let’s get started! The tutoral is divided into sections. Each section represents a different part of the mobil menu:

  • A heading title
  • An intro parapraph
  • A graphic representation of that specific element
  • The CSS selector to target that element
  • Some code styling ideas

Where To Place And Customize The Code Snippets

If you are using our free Divi child theme, place the snippet into the style.css file. Otherwise, place these in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

You will find a snippet for each part of the menu in each section of the tutorial. Once you have our CSS selector ready, you can start adding custom code where it says “YOUR CSS HERE.” (be sure to remove that text)

Default Mobile Menu header

Let’s start with the menu header. This is the part that holds the logo and hamburger menu. There are limited settings in Divi, so this CSS is going to be needed any time you want to change the color or adjust spacing.

how to style and customize the Divi Theme Builder mobile menu module header

Edit The Default Menu Header

/*edit the default Divi mobile menu header*/
#main-header {
YOUR CSS HERE
}

Custom Style Ideas

The following is a list of some ideas for things you might want to do to style the overall submenu. You can choose to do this by placing the snippets into the selector shown above.

Remove Or Adjust The Spacing

padding: 0!important;

Change The Background Color

background: #000000!important;

Divi Mobile Menu Logo Image

You can do a couple things to the logo image as well. On our site, we have the logo overlapping the header and page content, which requires some spacing and sizing adjustments. You could also apply a border or box shadow.

how to style and customize the Divi Theme Builder mobile menu module dropdown logo image

Edit The Divi Default Mobile Menu Logo Image

/*edit the Divi default mobile menu logo image*/
#logo {
YOUR CSS HERE
}

Edit The Divi Mobile Menu Module Logo Image

/*edit the Divi mobile menu logo image*/
.et_pb_menu__logo img {
YOUR CSS HERE
}

Custom Style Ideas

Here are some ideas you could do to style the Divi mobile logo image. You can choose to do this by placing the snippets into the selector shown above.

Adjust The Spacing

padding: 30px;

Adjust The Width

width: 80%;

Set A Max Width

max-width: 200px;

Add A Box Shadow

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

Divi Mobile Menu Hamburger Icon

If you want to change some settings with the mobile menu hamburger icon, you can do so with CSS. Remember, the Menu module has a few settings like size and color, but the default menu has no settings for this.

how to style and customize the Divi Theme Builder mobile menu module hamburger icon

Edit The Divi Mobile Menu Hamburger Icon

/*edit the Divi mobile hamburger icon*/
.mobile_menu_bar:before {
YOUR CSS HERE
}

Custom Style Ideas

The following is a list of some ideas for things you might want to do to style the Divi menu hamburger icon. You can choose to do this by placing the snippets into the selector shown above.

Set The Color

color: #000000;

Add A Background Color

background: #ff0000;

Set The Size

font-size: 48px;

Change The Icon

content: "";

Add A Border

border: 2px solid #ff0000;

Make The Border Rounded

border-radius: 100px;

Change The Icon To An X When Opened

Check out this fun quick snippet: How To Change The Divi Hamburger Menu To An X When Opened

How To Change The Divi Mobile Menu Hamburger Icon To An X When Open YouTube Video Tutorial by Pee Aye Creative

Divi Mobile Menu Dropdown

One of the first things you may want to adjust is the ugly blue thick like at the top of the mobile menu dropdown. Or maybe you want to remove some spacing around the outside, make it wider, change the background color, or adjust the shadow. 

how to style and customize the Divi Theme Builder mobile menu module dropdown

Edit The Divi Mobile Menu Dropdown

/*edit the Divi mobile menu dropdown*/
.et_mobile_menu {
YOUR CSS HERE
}

Custom Style Ideas

The following is a list of ideas of some things you might want to do to the Divi mobile menu dropdown. You can choose to do this by placing the snippets into the correct selector shown above.

Remove The Top Border

border-top: 0px;

Adjust The Spacing

padding: 0px!important;

Add Or Adjust The Shadow

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

Make It Wider

width: 112%;
margin-left: -6%;

Collapse The Divi Mobile Menu Submenus

Check out this related tutorial: How To Collapse Divi Mobile Menu Submenus

How To Collapse Divi Mobile Menu Submenus Tutorial by Pee Aye Creative

Divi Mobile Menu Parent Links

Now we come to the menu item links. You can do a lot of adjustments here, like color, spacing, background, opacity, and even get rid of the tiny bottom border.

how to style and customize the Divi Theme Builder mobile menu module parent menu link

Edit The Mobile Menu Parent Links

/*Divi mobile menu parent links*/
.et_mobile_menu li a {
YOUR CSS HERE
}

Custom Style Ideas

The following is a list of ideas of some things you might want to do to style the Divi mobile menu parent links. You can choose to do this by default, or on hover, by placing the snippets into the correct selector shown above.

Adjust The Spacing

padding: 10px 20px;

Change The Opacity (Especially On Hover)

opacity: 1;

Change The Background Color (Especially On Hover)

background: #ffffff;

Change The Font Size

font-size: 20px!important;

Change The Link Color

color: #2cba6c;

Add Letter Spacing

letter-spacing: 2px;

Adjust The Border

border-bottom: 2px solid #000000!important;

Divi Mobile Menu Submenu Child Links

Similar to the previous section, you can also adjust the submenu items. These appear by default with a small indent on the left. The styling suggestions here shoud probably be similar to the previous section about the parent links.

how to style and customize the Divi Theme Builder mobile menu module submenu child link

Edit The Mobile Menu Child Links

/*Divi mobile menu submenu links*/
.et_mobile_menu .menu-item-has-children li a {
YOUR CSS HERE
}

Custom Style Ideas

The following is a list of ideas of some things you might want to do to style the Divi mobile menu submenu links. You can choose to do this by default, or on hover, by placing the snippets into the correct selector shown above.

Adjust The Spacing

padding: 10px 20px;

Change The Opacity (Especially On Hover)

opacity: 1;

Change The Background Color (Especially On Hover)

background: #ffffff;

Change The Font Size

font-size: 20px!important;

Change The Link Color

color: #2cba6c;

Add Letter Spacing

letter-spacing: 2px;

Adjust The Border

border-bottom: 2px solid #000000!important;

Prefer To Use A Plugin?

If this is all a little too much code for you, I get it. You might want to check out a plugin my friend Peter at Divi Engine made called Divi Mobile

divi mobile png

The Divi Mobile plugin allows you to create custom looking, beautiful mobile menus for your Divi site without having to write any code.

39
Last updated Aug 31, 2021 @ 11:26 am

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

33 Comments

  1. Robi

    You are the best! So easy to learning with you. Tnx

    Reply
  2. Jacob

    Love the post. I get so much out of your content. It’s so frustrating having the mobile menu size be determined by its column and not easily finding which selector to target. This post was exactly what I was looking for for my company website mobile menu. Wish ET would add the CSS targets to the query buttons. Would make CSS easier. Another menu to look at is the divicio[.]us Divi Mad Menu that just launched.

    Reply
  3. Ejay

    Hey Nelson, thanks for sharing this! I just subscribed. Could you share how we can place a functional cart icon next to or above the hamburger icon in mobile?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Ejay, glad to have you along! The cart icon shows when you have WooCommerce installed, so make sure you have that. Is there something beyond that you were referring to?

      Reply
  4. Lucia

    Thanks Nelson! I no longer google, I come straight to pee aye!
    Do you know if it is possible to make columns with the menu child links?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Lucia, that’s so cool to hear! I’m so glad you find our stuff helpful!

      About the columns, I believe you mean having two menu items side by side on mobile, correct? You could try something like

      .et_mobile_menu ul li a {
      width: 50%;
      float: left;
      }

      Reply
  5. Jason Prater

    Great tutorial! You had one before that showed how to add icons to the menu with ET and Font Awesome icons. Do you have any code to make that work with the mobile menus?

    Reply
      • Jason Prater

        Yes, that does work. It works well with the Elegant Themes icons across all devices but it seems to have trouble with the Font Awesome icons on IOS mobile devices. In the mobile menu I just get a rectangle where the icon should be. Both work great on desktop though.

  6. theCreativeMind

    great tutorial you have here on your site!

    Reply
  7. Erica

    Hi! Do you happen to have a guide for Divi menu not working on mobile? How to fix it?

    Reply
  8. denis

    hey 🙂 nice tut! one little thing. I am trying to align the menu items horizontaly so evrything is in a like line. i cant get it to work .-. any ideas?

    Reply
  9. Patrick

    mine has truly conflicted with main menu settings and dosent seem to work no matter what i do

    Reply
    • Hemant Gaba

      I am so sorry to hear that. Could you please share the URL of the website and explain what you are trying to achieve with the Menu for better clarity?

      Reply
  10. Jorg

    Great content! Definitely helped adding some cool new features to the site. I played around with the code and managed to create a fullscreen dropdown menu on both desktop and mobile. Currently, the menu items are centered at the top… is there a way to move them down and put them centered in the middle of the page? Regardless of device…

    Thanks 😀

    Reply
    • Hemant Gaba

      We are glad that our guides are helping you in some way. Could you please share the URL of the page which has the Menu as that will make it easy to understand what you are exactly referring to?

      Reply
      • Jorg

        Thanks for your reply 🙂

        Of course, website url is: zerotolaunch.nl

      • Hemant Gaba

        Please try this snippet:

        .opened ul#mobile_menu1 {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        }
        .et_mobile_menu{
        padding: 0 !important;
        }

        This will place the Menu Items in the center regardless of the screen size. Let us know if that helps.

  11. Janis McAdoo

    Thank you so much for this tutorial! Exactly what I needed to style the hamburger menu on my Divi Theme Builder header. 🙂

    Reply
  12. Emma Paterson

    Your tutorials are great – do you have anything around being able to click anywhere outside the menu to close it? We have been asked to use the mobile menu on desktop too, but to have the option to click any where on the page and not just the cross to close the menu.

    Reply
    • Hemant Gaba

      Could you please share the URL of the page for me to investigate further?

      Reply
  13. Dac

    Hi, great tutorial! I’m curious, is there any possibility to change the padding or the position of the hamburger menu? Thanks in advance.

    Reply
  14. wasim

    how to change divi theme mobile version sub menu color

    Reply
    • Hemant Gaba

      Could you please try the snippet given below and see if that helps?

      @media all and (max-width: 980px){
      #mobile_menu1 li ul.sub-menu{
      background-color: #fff !important;
      }

      #mobile_menu1 li ul.sub-menu li a{
      color: #E09900 !important;
      }
      }

      You can change the color and the background-color in the above snippet as per your liking.

      Let me know how it goes. 🙂

      Reply
  15. Crawford Paul

    Hi Nelson. Thanks for this tutorial. If I want to hide the 3rd level of the menu on mobiles what css would impact that?

    Reply
    • Hemant Gaba

      Hey Paul,

      Could you please share the URL of the website for me to investigate further on that?

      Reply

Submit a Comment

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

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Recent Posts

How To Properly Update Divi

How To Properly Update Divi

In this tutorial, I am going to explain how to properly update Divi by listing the most important steps to take to ensure peace of mind.

Pin It on Pinterest

0

Your Cart