How To Style The Divi Mobile Menu In 6 Steps

[@Victor-Duse]

👉Here are all the snippets: divimundo.com/en/blog/six-tips-for-a-better-divi-mobile-menu/ Please comment, like and subscribe if you liked this video. ;-)

[@swissgameartist5447]

Absolutely fantastic, Victor! Thank you very much for this great support. Always a pleasure.

[@Victor-Duse]

Cool, I’m glad you liked it! 😎

[@jonasheinzerlingoxygenimag295]

Outstanding Victor! I've been looking for this for some time. Great tutorial! Thank you.

[@Victor-Duse]

Thanks Jonas, I’m glad you liked it! 🍻 🙂

[@DavidKurtz1]

Great code and tutorial. Thank you!

[@Victor-Duse]

Thanks David, I'm glad you liked it! 🙂

[@steinsmo]

WOW, JUST WOW! Thank you!

[@Victor-Duse]

You're very welcome! 🙂

[@grantgp]

Great tutorial, thanks

[@Victor-Duse]

I’m glad you liked it! 😊

[@lausianne]

Excellent. This is pretty basic stuff. I wonder why this styling is not default. Or at least some of it, like the burger turning into a cross, which has been the standard for a long time ...

[@Victor-Duse]

Agreed. I hope they give the menu module a well-needed upgrade after the Divi 5.0 update. Meanwhile, you can check out my tutorial on advanced mobile menus: kzbin.info/www/bejne/fZ3UmmaXmdKSoMU

[@trusteemedia]

Thank you. Great tutorial !

[@Victor-Duse]

Thanks Kamil, I'm glad you liked it! 🙂

[@htkdesigns6478]

Thank you sir ,very good job,

[@Victor-Duse]

I’m glad you liked it! 😀

[@htkdesigns6478]

@@Victor-Duse sir, i couldn't apply for this to global header,how to apply ,pl help .Thanks.

[@Victor-Duse]

@@htkdesigns6478 Can you tell me more about the problem and perhaps share a link?

[@htkdesigns6478]

@@Victor-Duse dear sir, when create a global header & apply css code but Fix overlapping when displaying search icon and/or cart icon not working and other thing is how to apply navigation search features -ex -search box color. Thank you.

[@Victor-Duse]

@@htkdesigns6478 I'm afraid I can't help you without a link to the site.

[@miguelcarbajal948]

Great video, I have a question, how can i remove the "select page" bar on mobile?

[@Victor-Duse]

Hi! Please share a link and I'll have a look.

[@dejanmihajlica4161]

Thanks a lot. Very good job!

[@Victor-Duse]

Thanks Dejan! I’m glad you liked it. 🙂

[@cores-music]

Thank you very much, it's very helpful...

[@Victor-Duse]

You’re very welcome! 🙌

[@motivation4life492]

Thank you!

[@Victor-Duse]

You’re very welcome ☺️

[@ufxdigital5067]

It is amazing buddy !! Thanks a lot !! I would like to know if you know how add the search bar inside the mobile menu.. is that possible this way or you need to do it different way like using some plugin ?

[@Victor-Duse]

Thanks! Sure, my go to plugin for injecting basically anything in the mobile menu (+ lots of different styling options) is Divi Toolbox. 25% off for a few days more so check it out at divimundo.com/toolbox/

[@klemo7672]

Great Job. Thx

[@Victor-Duse]

I'm glad you liked it! 🙂

[@StudioUno-mv3gc]

Wonderfull tutorial, but how can a man go to the Header Template ( Edit Specif page: Home Header Layout) to do what you do at the 6:10 min ? Thanks

[@Victor-Duse]

Thanks! Go to your WordPress dashboard and head over to Divi » Theme Builder. You can create and edit your header templates from there.

[@jawadwaheed5105]

awesome awesome, really very nice

[@Victor-Duse]

Thank you Jawad! 😀

[@dragon3602010]

How can we add some buttons and texts in the menu?

[@Victor-Duse]

Hi S! My go to plugin for injecting basically anything in the mobile menu (+ lots of different styling options) is Divi Toolbox. Check it out at divimundo.com/toolbox/

[@pascalbarth1610]

Super, one question. how can I solve this with the font 'Menu' in the tablet version? It's not in the right place.

[@Victor-Duse]

Hi! You can target mobile and tablet differently using media queries. Try to replace the original CSS with the snippet below and change the values for tablet. Let me know how it goes! 🙂 /*** Responsive Styles Tablet Only ***/ @media all and (min-width: 768px) and (max-width: 980px) { .et_mobile_nav_menu:before { content: 'MENU'; position: absolute; right: 40px; margin-top:5px; color: #333; font-size:16px; } } /*** Responsive Styles Smartphone Only ***/ @media all and (max-width: 767px) { .et_mobile_nav_menu:before { content: 'MENU'; position: absolute; right: 40px; margin-top:5px; color: #333; font-size:16px; } }

[@pascalbarth1610]

Thank very much for ur help. @@Victor-Duse

[@Victor-Duse]

@@pascalbarth1610 You’re very welcome! ☺️

[@camilasalgado2194]

Thanks mate!!!!

[@Victor-Duse]

Glad you liked it Camila! 🙌

[@marcoscandido7434]

Thank you! Do you know how to speed up the toggle animation? The menu slides down a bit slow, I wanted to make it faster.

[@Victor-Duse]

Hi Marcos! Not off the top of my head, I’m afraid. For more advanced mobile menu tweaks I would recommend Divi Toolbox. Check out: kzbin.info/www/bejne/fZ3UmmaXmdKSoMU

[@doeyehof]

Thank you!!

[@Victor-Duse]

Glad you liked it Doeye! 🙂

[@sobrisobri4530]

Hello Sir, step 6, how make full height, i mean i want my logo and text menu disappear, thanks

[@Victor-Duse]

Hi Sobri! You can play around with negative top margin like this: .mobile_nav.opened .et_mobile_menu { margin-top: -10px; } Adjust the number of negative px needed to cover the mobile menu bar. However, this means that the mobile menu will cover the close icon (X) too.

[@sobrisobri4530]

@@Victor-Duse thank you Sir

[@JulianoTosoDill]

when uploading the file it shows an error

[@Victor-Duse]

Hi Juliano! I just tested to import it with the latest versions of Divi and WordPress and it works fine. Make sure that you extract the zip file first. Then go to Divi » Theme Builder. Click "Add global header" (or edit an existing header template). Click the purple circle in the bottom to open the Divi Builder menu and click the Portability icon (↓↑ ). Click "Import" and upload the .json file. Let me know how it goes!

[@cookcu80]

Mantapp

[@Victor-Duse]

Say what? 🤔

[@learningtostream3919]

Im getting no change at all

[@Victor-Duse]

Perhaps it could be a caching issue. Try to clear both the website cache and the browser cache. Also, make sure to preview the menu in frontend (outside of the Theme Customizer).

[@learningtostream3919]

lol text color@@Victor-Duse

[@learningtostream3919]

Done thank you@@Victor-Duse

[@therankingworld7627]

THANKS DIVI MUNDO VIKTOR IT WORKED LIKE A CHARM FOR ME JUST NOW WHEN IM DONE WITH THE SITE ILL SEND YOU A LINK?

[@Victor-Duse]

Perfect! 🙌 Sure thing, just post the link in a comment and I'll check it out. 🙂