By now our Divi Menu Module series is quite hug. By popular demand, we are now going to show you how to customize and style the Divi mobile menu using the Theme Builder Menu module! We are so excited for this one!Â
Learn, Not Just Copy
The format will be like our submenu and mega menu tutorials, with graphics and snippets to not only copy but to practice learning as well! With this tutorial, you will be able to style and customize the Divi Theme Builder mobile menu module, along with the image, hamburger menu, dropdown, menu items, and submenu items. You will learn how to change things like the colors, border, spacing, hover effects, and more!
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
First, we need to understand how the Divi mobile menu is made so we can target individual elements of it separately to create your own design style. There are a lot of parts, but we are only going to cover the most essential and helpful parts here. Those include:
The Header
Logo Image
Hamburger Icon
The Dropdown Menu
Menu Items & Links
Submenu Items & Links
Here is an example of how the Divi Menu module looks by default on mobile:
Here is an example of how the Divi Menu module looks by default on mobile:
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.
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.
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.
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.
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.Â
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.
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.
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.
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.Â
The Divi Mobile plugin allows you to create custom looking, beautiful mobile menus for your Divi site without having to write any code.
I hope you have enjoyed learning How To Customize And Style The Divi Mobile Menu. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!
Subscribe for more stuff like this.
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally we send an extra separate email here and there if we just can't wait! So that's what you will get if you subscribe, and you can always unsubscribe at any time if you just can't take it anymore 🙂
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.
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.
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?
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?
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?
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.
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?
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…
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?
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.
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.
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally we send an extra separate email here and there if we just can't wait! So that's what you will get if you subscribe, and you can always unsubscribe at any time if you just can't take it anymore 🙂
Divi Tutorials On YouTube
Our videos have views! Join subscribers and enjoy over video tutorials!
Welcome to the Pee-Aye Creative monthly newsletter recap for the month of September 2021 with some fun family and important product news.
Pin It on Pinterest
{"id":null,"mode":"button","open_style":"in_modal","currency_code":"USD","currency_symbol":"$","currency_type":"decimal","blank_flag_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/blank.gif","flag_sprite_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/flags.png","default_amount":500,"top_media_type":"none","featured_image_url":false,"featured_embed":"","header_media":null,"file_download_attachment_data":null,"recurring_options_enabled":true,"recurring_options":{"never":{"selected":true,"after_output":"One time only"},"weekly":{"selected":false,"after_output":"Every week"},"monthly":{"selected":false,"after_output":"Every month"},"yearly":{"selected":false,"after_output":"Every year"}},"strings":{"current_user_email":"","current_user_name":"","link_text":"Leave a tip","complete_payment_button_error_text":"Check info and try again","payment_verb":"Pay","payment_request_label":"Pee-Aye Creative","form_has_an_error":"Please check and fix the errors above","general_server_error":"Something isn't working right at the moment. Please try again.","form_title":"Pee-Aye Creative","form_subtitle":null,"currency_search_text":"Country or Currency here","other_payment_option":"Other payment option","manage_payments_button_text":"Manage your payments","thank_you_message":"Thank you for being a supporter! It is people like you who keep us going week after week!","payment_confirmation_title":"Pee-Aye Creative","receipt_title":"Your Receipt","print_receipt":"Print Receipt","email_receipt":"Email Receipt","email_receipt_sending":"Sending receipt...","email_receipt_success":"Email receipt successfully sent","email_receipt_failed":"Email receipt failed to send. Please try again.","receipt_payee":"Paid to","receipt_statement_descriptor":"This will show up on your statement as","receipt_date":"Date","receipt_transaction_id":"Transaction ID","receipt_transaction_amount":"Amount","refund_payer":"Refund from","login":"Log in to manage your payments","manage_payments":"Manage Payments","transactions_title":"Your Transactions","transaction_title":"Transaction Receipt","transaction_period":"Plan Period","arrangements_title":"Your Plans","arrangement_title":"Manage Plan","arrangement_details":"Plan Details","arrangement_id_title":"Plan ID","arrangement_payment_method_title":"Payment Method","arrangement_amount_title":"Plan Amount","arrangement_renewal_title":"Next renewal date","arrangement_action_cancel":"Cancel Plan","arrangement_action_cant_cancel":"Cancelling is currently not available.","arrangement_action_cancel_double":"Are you sure you'd like to cancel?","arrangement_cancelling":"Cancelling Plan...","arrangement_cancelled":"Plan Cancelled","arrangement_failed_to_cancel":"Failed to cancel plan","back_to_plans":"\u2190 Back to Plans","update_payment_method_verb":"Update","sca_auth_description":"Your have a pending renewal payment which requires authorization.","sca_auth_verb":"Authorize renewal payment","sca_authing_verb":"Authorizing payment","sca_authed_verb":"Payment successfully authorized!","sca_auth_failed":"Unable to authorize! Please try again.","login_button_text":"Log in","login_form_has_an_error":"Please check and fix the errors above","uppercase_search":"Search","lowercase_search":"search","uppercase_page":"Page","lowercase_page":"page","uppercase_items":"Items","lowercase_items":"items","uppercase_per":"Per","lowercase_per":"per","uppercase_of":"Of","lowercase_of":"of","back":"Back to plans","zip_code_placeholder":"Zip\/Postal Code","download_file_button_text":"Download File","input_field_instructions":{"tip_amount":{"placeholder_text":"How much would you like to tip?","initial":{"instruction_type":"normal","instruction_message":"How much would you like to tip? Choose any currency."},"empty":{"instruction_type":"error","instruction_message":"How much would you like to tip? Choose any currency."},"invalid_curency":{"instruction_type":"error","instruction_message":"Please choose a valid currency."}},"recurring":{"placeholder_text":"Recurring","initial":{"instruction_type":"normal","instruction_message":"How often would you like to give this?"},"success":{"instruction_type":"success","instruction_message":"How often would you like to give this?"},"empty":{"instruction_type":"error","instruction_message":"How often would you like to give this?"}},"name":{"placeholder_text":"Name on Credit Card","initial":{"instruction_type":"normal","instruction_message":"Enter the name on your card."},"success":{"instruction_type":"success","instruction_message":"Enter the name on your card."},"empty":{"instruction_type":"error","instruction_message":"Please enter the name on your card."}},"privacy_policy":{"terms_title":"Terms and conditions","terms_body":null,"terms_show_text":"View Terms","terms_hide_text":"Hide Terms","initial":{"instruction_type":"normal","instruction_message":"I agree to the terms."},"unchecked":{"instruction_type":"error","instruction_message":"Please agree to the terms."},"checked":{"instruction_type":"success","instruction_message":"I agree to the terms."}},"email":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email address"},"success":{"instruction_type":"success","instruction_message":"Enter your email address"},"blank":{"instruction_type":"error","instruction_message":"Enter your email address"},"not_an_email_address":{"instruction_type":"error","instruction_message":"Make sure you have entered a valid email address"}},"note_with_tip":{"placeholder_text":"Your note here...","initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"empty":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"not_empty_initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"saving":{"instruction_type":"normal","instruction_message":"Saving note..."},"success":{"instruction_type":"success","instruction_message":"Note successfully saved!"},"error":{"instruction_type":"error","instruction_message":"Unable to save note note at this time. Please try again."}},"email_for_login_code":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email to log in."},"success":{"instruction_type":"success","instruction_message":"Enter your email to log in."},"blank":{"instruction_type":"error","instruction_message":"Enter your email to log in."},"empty":{"instruction_type":"error","instruction_message":"Enter your email to log in."}},"login_code":{"initial":{"instruction_type":"normal","instruction_message":"Check your email and enter the login code."},"success":{"instruction_type":"success","instruction_message":"Check your email and enter the login code."},"blank":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."},"empty":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."}},"stripe_all_in_one":{"initial":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"empty":{"instruction_type":"error","instruction_message":"Enter your credit card details here."},"success":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"invalid_number":{"instruction_type":"error","instruction_message":"The card number is not a valid credit card number."},"invalid_expiry_month":{"instruction_type":"error","instruction_message":"The card's expiration month is invalid."},"invalid_expiry_year":{"instruction_type":"error","instruction_message":"The card's expiration year is invalid."},"invalid_cvc":{"instruction_type":"error","instruction_message":"The card's security code is invalid."},"incorrect_number":{"instruction_type":"error","instruction_message":"The card number is incorrect."},"incomplete_number":{"instruction_type":"error","instruction_message":"The card number is incomplete."},"incomplete_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incomplete."},"incomplete_expiry":{"instruction_type":"error","instruction_message":"The card's expiration date is incomplete."},"incomplete_zip":{"instruction_type":"error","instruction_message":"The card's zip code is incomplete."},"expired_card":{"instruction_type":"error","instruction_message":"The card has expired."},"incorrect_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incorrect."},"incorrect_zip":{"instruction_type":"error","instruction_message":"The card's zip code failed validation."},"invalid_expiry_year_past":{"instruction_type":"error","instruction_message":"The card's expiration year is in the past"},"card_declined":{"instruction_type":"error","instruction_message":"The card was declined."},"missing":{"instruction_type":"error","instruction_message":"There is no card on a customer that is being charged."},"processing_error":{"instruction_type":"error","instruction_message":"An error occurred while processing the card."},"invalid_request_error":{"instruction_type":"error","instruction_message":"Unable to process this payment, please try again or use alternative method."},"invalid_sofort_country":{"instruction_type":"error","instruction_message":"The billing country is not accepted by SOFORT. Please try another country."}}}},"fetched_oembed_html":false}
You are the best! So easy to learning with you. Tnx
Thank Robi, so glad you enjoy my videos! 🙂
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.
Hi Jacob, glad you like this and it is helpful! Thanks so much for the feedback! 🙂
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?
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?
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?
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;
}
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?
Hi Jason,
Sure, you could target just the mobile menu if you want and use that in the code instead, like .et_mobile_menu ul li a
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.
great tutorial you have here on your site!
Thank you very much, I hope you find it helpful!
Hi! Do you happen to have a guide for Divi menu not working on mobile? How to fix it?
Hi Erica,
What is not working? If there is some bug please reach out to Elegant Themes. I usually only make guides for common issues.
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?
Hi Denis,
Could you give me some info about what you mean? You are trying to align mobile menu items in a horizontal line?
mine has truly conflicted with main menu settings and dosent seem to work no matter what i do
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?
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 😀
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?
Thanks for your reply 🙂
Of course, website url is: zerotolaunch.nl
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.
Thank you so much for this tutorial! Exactly what I needed to style the hamburger menu on my Divi Theme Builder header. 🙂
That’s great, Janis, so happy to help!
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.
Could you please share the URL of the page for me to investigate further?
Hi, great tutorial! I’m curious, is there any possibility to change the padding or the position of the hamburger menu? Thanks in advance.
Thank you! Can you be more specific? You want to move just the icon? And please share a link also.
how to change divi theme mobile version sub menu color
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. 🙂
Hi Nelson. Thanks for this tutorial. If I want to hide the 3rd level of the menu on mobiles what css would impact that?
Hey Paul,
Could you please share the URL of the website for me to investigate further on that?