10 Useful Code Snippets for your Divi Menu Mobile
There are several plugins that allow you to change the appearance of the Divi mobile menu, but what if you can make some customizations without using a plugin? You don’t like the drop-down menu and would like a Slide-in menu? Would you like the Divi Menu Mobile to stay sticky at the top? Or do you want to use a different logo for the mobile menu? For all these cases, there is a hack that allows you to customize your Divi Menu Mobile using only fragments of CSS code.
Basically, fragments of CSS/JS code are used to get specific features that might otherwise require a plugin and in this article, I listed 10 Useful Code Snippets for your Divi Menu Mobile.
Are you ready to find them out? Let’s get started!
1. Add background image to Divi mobile menu
With this snippet, you can add an image to the mobile menu. I’ve also added an overlay to improve the contrast of the text and get a better readability.
How to customize this code: All you have to do is replace the link of the image you see inside the brackets with the link of your image. Also if you want to change the color of the overlay, you just have to change the values of the color rgba, really very simple.
.mobile_nav.closed #mobile_menu, .mobile_nav.opened #mobile_menu { -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background: linear-gradient( rgba(66, 66, 66, 0.50), rgba(66, 66, 66, 0.90) ),url("https://divi-tutorials.creativechildthemes.com/wp-content/uploads/2018/10/mobile-bg.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; }
Result:
2. Making the mobile menu sticky
With this short snippet, your mobile menu will remain fixed at the top of the page.
Source code Divi Life
@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; }
3. A different logo for the mobile menu
Sometimes it may be necessary to use a different logo for the mobile menu and this snippet does exactly that.
@media only screen and (max-width: 980px){ #logo { content: url(INSERT HERE NEW LOGO IMAGE URL); } }
4. Add a shadow under the mobile menu
Want to add a shadow below the mobile menu? This snippet is what you are looking for.
@media only screen and (max-width: 980px){ #main-header { -webkit-box-shadow: 0 3px 50px rgba(0,0,0,.2); -moz-box-shadow: 0 3px 50px rgba(0,0,0,.2); box-shadow: 0 3px 50px rgba(0,0,0,.2); } }
Result
5. Adding text Before and After of the Hamburger Icon
If you want to add text before or after the hamburger icon of the Divi menu, this snippet is what you need.
I added two different versions of the code:
- In the first case the text will be to the right of the menu icon.
- In the second
case the text is before the icon, the on the left.
.mobile_menu_bar:after { position: relative !important; content: 'MENU'; bottom: 9px; left: 10%; color: #363636; }
Result:
#et_mobile_nav_menu:before { content: 'MENU'; font-size: 14px; position: absolute !important; bottom: 29px; right: 35px; color: #363633; }
Result:
6. Change the hamburger icon to X when opened
A simple snippet to change the hamburger icon to X when the menu is open.
.mobile_nav.opened .mobile_menu_bar:before { content: '\4d'; }
Result:
7. Fullwidth style + Collapsing Nested Menu Items
This hack is a bit more complex than those listed so far but it allows you to add two very cool features to your mobile menu:
– The Fullwidth style
– Collapsing Nested Menu Items
The interesting thing is the possibility of grouping all the items in the submenu and hiding them with a Toggle function that allows you to get a more tidy and intuitive menu.
But unlike the solution proposed by Elegant Themes in his tutorial “Divi Mobile Menu Hack: Collapsing Nested Menu Items“, this hack makes clickable the parent link of the Submenu as well.
How to add this hack to your menu?
First of all, add the CSS code to your Divi site. You can add it to your Theme Options in the Custom CSS field or in your child theme.
@media screen and (max-width: 980px) { .container { width: 100% !important; } .et_header_style_left .logo_container{ padding-left: 25px; } .et_header_style_centered #main-header .mobile_nav { background-color: transparent; } .mobile_nav.closed .select_page { display: none; } .et-fixed-header#main-header { background-color: transparent !important; } } .et_mobile_menu { top: 0 !important; border-top: 3px solid #283fc0 !important;; background-color: #fff !important; padding: 20% 0; } .et_mobile_menu li a { text-align: center; font-size: .8em; border: 0; padding: 15px 0; letter-spacing: 1px; } .mobile_nav ul#mobile_menu .current_page_item > a { color: #283fc0; } .mobile_nav ul#mobile_menu li ul li a { font-size: .8em !important; margin: auto; color: #363636 !important; padding-top: 0.2em; } .et_mobile_menu li a:hover { color: #999; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .mobile_menu_bar:before { padding-right: 25px; color: #363636 !important; } .mobile_nav.opened .mobile_menu_bar:before { content: "\4d"; z-index: 99999; } /* NESTING MOBILE MENU SETTINGS */ #et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before { content: '\4d'; } #top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after, #et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after { content: '5'; } #main-header #mobile_menu.et_mobile_menu .menu-item-has-children { position: relative; } #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle { position: absolute; background-color: rgba(0,0,0,0.03); z-index: 1; width: 36px; height: 36px; line-height: 36px; border-radius: 50%; top: 6px; right: 10px; cursor: pointer; text-align: center; } #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped { background-color: rgba(0,0,0,0.1); } #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before { font-family: "ETmodules" !important; font-weight: normal; font-style: normal; font-variant: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 36px; font-size: 24px; text-transform: none; speak: none; content: '\33'; } #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before { content: '\32'; } #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu { display: none !important; padding-left: 0; } #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu { display: block !important; background-color: rgba(0,0,0,0.03); } #main-header #mobile_menu.et_mobile_menu li li { padding-left: 0; } #main-header #mobile_menu.et_mobile_menu li a, #main-header #mobile_menu.et_mobile_menu li li a, #main-header #mobile_menu.et_mobile_menu li li li a { padding-left: 20px; padding-right: 20px; } #main-header #mobile_menu.et_mobile_menu .menu-item-has-children .sub-menu-toggle + a { padding-right: 20px; } #main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a { background-color: transparent; font-weight: inherit; } #main-header #mobile_menu.et_mobile_menu li.current-menu-item > a { font-weight: bolder; }
The second thing you need to do is add the JS code in the Integrations tab that you always find in the Theme Options (see screenshot below).
NOTE: Be careful to not cut part of the code while copying and pasting because even if you don’t have a single bracket, it may not make the menu work properly.
Result:
8. Slide-in Menu Mobile
A hack that you will surely love is the one that allows you to add a slide-in effect to the Divi mobile menu only with CSS code. No plugins, just pure CSS code that allows you to totally change the look of your Divi mobile menu.
If you’re interested in this hack, take a look at the tutorial I wrote and published on Needyesterday.
I’m sure you’ll find all 8 menu styles listed in the tutorial very interesting!
Link Tutorial: 8 new
9. Divi Menu Mobile Centered and Centered Inline Like The Default Style
When using the Centered or Centered inline style for the Desktop menu, the layout of the mobile menu change as well. But with this hack you can apply the default layout while leaving the Desktop menu unchanged.
Source code from Divicio.
Before:
After:
10. How to change the label “select a page” for the centered menu style
This last snippet is useful if you use the “Centered” menu style and want to change the “Select a page” label. With very few lines of JS code, you can add your own custom label.
All you have to do is add this code to your Theme Options (as I have already shown you) and change the text “your-text-here” with the label you prefer. Very easy, right? 🙂
Result:
Conclusion
We’ve come to the end of this article. As you can see with a few lines of code you can extend and improve the mobile menu of your Divi site without the use of plugins.
Have you already used one of this snippet or do you think some of it is missing?
Let me know in the comments.
Follow Me
Hi Fabio :).
Thanks for sharing that really cool snippets with us 😀 !!
Thanks a lot Pierre! are all snippets that I almost always use and are really useful
GREAT ARTICLE!!
Awesome collection, Fabio! Thanks a lot! I love Divi Snippets!
Thank you Elisandro! I really appreciate it 🙂
Very nice collection! As mentioned before… 😉
Thank you Joost! I hope it’ll be useful for you 🙂
Thank you so much Fabio – these are so useful and time saving for me as someone with very basic coding knowledge. I always think the mobile menu is bland in Divi. Now I can zuzz it up 🙂
Thanks to you Debby!
they are all Snippets that I use myself for almost all my projects because I also don’t like the look of the Mobile Menu, so I thought to share this collection of Snippets
Hello Fabio, really usefull thank you so much.
A question: Is there a way to have another menu level (more sub-subcategories) that you can collapse but also clickable?
Thank you in advance.
Hi Eli!
I’ve never tried because I never needed to create a double sub-menu, but probably it’s possible but we’ll need to modify the JS code because it currently only works with a sub-menu.
Where exactly is this code found when editing the theme? What section?
Hi. Thank you for your useful code. But I need code that when I click on another submenu, the previous submenu close and collect automatic and new sub menu that I click on it open. I’ll be glad to share and help me.
Thanks a lot
This is AMAZING!!! I just used 5, 9 and 10!! Thank you it was a huge help!
Hey dude, I’m using the text before hamburger – how would i make this text a link?
Hey Fabio! You are Awesome but one thing i want from you is “how style single post page like you are having on your site”Please make a Tutorial on this topic as well as soon as Possible.
Thanks…
Thank you Samar!
I’m sure we’ll get there as soon as we can 🙂
Hi Fabio,
on my search for help I found your article. On number 6 Mobile menu you have lines between the topics/titles. Only there. How did you achieve that?
Thanks for your help
Stefan
Hi Stefan!
the separation line is added by default. What you see is a screenshot of the Divi mobile menu, we have not added any customization.
I implemented #9 to make mobile logo aligned left and to hide background of the “select page”. After doing this, the hamburger has disappeared. I’ve tried adding various CSS to color the hamburger and make it appear, but no luck. What am I missing? The site in question is https://blessingsinthemirror.com
Hi Foster!
it seems that the problem is caused by the CSS code that I highlighted in the screenshot below. Maybe you’re using a plugin that adds some menu code, but this creates a conflict.
https://www.dropbox.com/s/686015ni390qp7u/Blessings_in_the_Mirror___Inspiration__Encouragement__Hope__.png?dl=0
Thank you, I find the problem and got it solved.
Thank you so much!!! I had been searching high and low for the hack to fix the mobile menu when using a centered logo. Yours was the only one I could find and it works perfectly. Others tell you how to change or remove the “Select Page” text but not remove the grey box.
Love it!
Thanks to you for your kind feedback 🙂
If you want to remove the grey box, you can simply set up a transparent background. Now I remember the CSS selector of the box, but if you share the link of your site, I send you the code to add to delete the grey box.
Thank You! Divi don’t have this feature available, you code was useful!
/* Active menu Divi phone */
@media screen and (max-width: 980px) {
.mobile_nav ul#mobile_menu .current_page_item > a {
color: #3faadf;
}
}
Thanks Fabio! Turning the hamburger in to an X worked perfectly and is much appreciated! I am still trying to figure out how to get the background image in the dropdown menu however. I’ve input your code with my image url in to the custom css field under theme options but it doesn’t seem to be having any effect on my page. Can you help me out?
Hey Fabio, Great help. Something strange is going on. The code works fine for the main menu. But when I try to add a full-width menu via the menu module, the code fails to work i.e. the menu does not collapse. Any insights as what could be the issue? And how to fix it?
Hi Fabio,
Thank you so much for these wonderfull code snippets! Do they only work for the default header in divi with the class name #main-header?
I created a custom header in the divi builder, so my header is not the #main-header. Do you know how I can still apply one your css snippets?
Thanks in advance for considering my question.
Hello Fabio. Finally…exactly what ? had been looking for the past two weeks :)) Thank you for all this.
I’m particularly interested in point 7, as I need our mobile menu to have parent items both clickable and expansible.
What is not clear to me is whether I should follow this tutorial https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder before pasting the two codes you provide.
Anyway, I’ve tried both ways (with and without Divi’s suggestions) and it’s not working. The hyperlinked parent items don’t send to their pages and the third level is not showing. Please see it here https://irpimedia.irpi.eu/
Perhaps you could help? We are going online in just a few days with our newly founded online newspaper.
A million thanks,
Lorenzo
Hey Fabio, thanks for this amazing contents.
I got a problem. It seems like all the snippets are working on my website but not fully.
I’m not obtaining the results i can see here.
Colours change, some widths as well but the menu is not full width on mobile and it is still showing up like it is by default, so like a little drop down menu on the side ( showing half of it and don’t know why! )
Thanks in advance for helping me out with this problem.
Have a great day,
Gabriele
So awesome and incredibly helpful! Thanks very much for this post.
thank you. the mobile collpase menu in mobile in Divi 4 worked.
Just a little problem… the arrow pointing down when the menu is closed is ok, but when we open the menu the arrow pointing up (to close the menu) appears together with the open arrow. Both apear in top of it´s other at the same time, looking like a cross.
So , when we open the menu the arrow pointing down should disapear…
can you help me?
Hi,
I have a global header, which is actually big on mobile. I can make it smaller but then the mobile menu isn’t been shown entirely.
Do you have any suggestions how I can make my global header with divi smaller without changing my mobile menu?