Divi Menu Module Sub-Menu Dropdown Styling: the Ultimate Guide

[@aniaromanskacom]

You may find this timestamp list useful ;-) 00:02:10 Divi Menu module customization options 00:03:41 Changing the sub-menu width 00:12:21 Full-width Menu items 00:14:28 Sub-menu items font styling 00:15:14 Sub-menu links on hover 00:17:15 Sub-menu border and inner spacing 00:19:25 Aligning sub-menu links with the parent menu item 00:21:20 Sub-menu rounded corners 00:23:18 Sub-menu shadow 00:24:41 Sub-menu triangle top arrow 00:28:55 Center-align the sub-menu container 00:31:30 Center-align the sub-menu links 00:31:55 Sub-menu animation 00:34:16 Changing the Sub-menu vertical offset

[@RavindraSDhande]

Wow learned so many new things about how to write CSS styles. You are as we all always say, "The Best Trainer..." the way you teach makes it feel so easy to learn. Would love to see a few more menu customisation videos for styling menus in different ways. Of course, now we can do it on our own, but your input would help. Also, can you have something on full-screen hero sections...

[@MirkoMancini]

Brilliant as usual, thanks Ania!

[@aniaromanskacom]

My pleasure!

[@robertrado7576]

Very precise and very nice job, helped a lot! And thanks for the reusable codes on your website! Thank you!

[@fernandoorendainmarketing]

Very good tips, thanks for the video... what a joy to see you sharing such valuable tips again.

[@aniaromanskacom]

You're welcome, Fernando! And thank you - it's great to be back! 😊👍

[@SelcukOZMUMCU]

AWESOME Tutorial Annia, as usual. I have learned using divi with your valued tutorials. Thanks so much! All the best.

[@aniaromanskacom]

Wonderful :) Glad it was helpful!

[@17aig]

Thank you so much Ania such a pleasant to follow your tutorials

[@aniaromanskacom]

Thanks so much 😊

[@jonasheinzerlingoxygenimag295]

Great tutorial Ania. Thank you!

[@aniaromanskacom]

Glad it was helpful!

[@chrisbenn]

I am really having trouble finding your 6:50 part using the "Inspector"! Where would you do this using divi?! :) Super nice video! :)

[@Mpittttt]

Love your videos! Thank you very much for this helpful content :)

[@aniaromanskacom]

Glad you like them! thank you for a lovely comment :-)

[@MichaelSeethaler-m5s]

This was crazy helpful!

[@aniaromanskacom]

I'm so glad!

[@darndarn99]

Fantastic tutorial even here in 2024. I am looking for a way to have that dropdown menu top colored bar to fade in from left to right, any ideas of where to start ?

[@smj997]

Hi! thanks for you great video! how can I center align menu items text center using css in menu module? (not the submenu items) the problem is I'm using divi for my RTL website and in mobile view, the menu items are aligned to the left. i want them be centered or right.

[@MB-sl8pw]

Very nice, will there be a tutorial for mobile menu as well 😁

[@aniaromanskacom]

Thank you, it is on my list 😉

[@ShaiyaOng]

Hi where should i be placing the codes? I think I got lost.. I was following it but i didn't know where to place the codes...

[@lismid9523]

Hi great tutorial! Little problem I have is that the styling i put in "Custom CSS" does not work for all the links in the dropdown menu. Do you have an idea on why that is? Thank you

[@MissVictoriaDonahue]

This looks great. But I'm a novice. How do I get the builder for the Menu? I can only access the Divi builder for the page content but not the menu bar / nav bar on top. Thanks!

[@aniaromanskacom]

You'd need to create a custom header template inside the Divi Theme Builder (WP dashboard -> Divi -> Theme Builder).

[@myuption]

Good tutorial, thanks for sharing. I am using the menu without a logo, it is inside a section with a defined height and background. The submenu does not appear below the section, but close to the menu in the middle, I tried to add a margin to move it down, but when you do it, the submenu flicks or dissapears a second until you ove the cursor above it. I tried the offset approach from the tutorial, but it adds a padding to the whole section and increases the height of it. Any ideas? :D

[@aniaromanskacom]

You would need to do some calculations - decrease the size of the section by the number of pixels you are increasing the bottom padding of the parent links (assuming you want to use the method I described at the end here: 00:34:16)

[@myuption]

@@aniaromanskacom Thank you for the reply, I will give it a try.

[@techsupport2092]

Hi Ania, thanks so much for this tutorial. It is very helpful. Do you know by chance how to move the submenu to the right? I tried .sub-menu{} but this CSS moves all dropdown menus and I want to move only one. Your help would be appreciated.

[@aniaromanskacom]

If you only want to target one specific submenu, it would be best to add a CSS class to the parent menu item (in the WP Menus dashboard) and then use this CSS class as a parent in your selector, eg. .myclass .sub-menu {}

[@techsupport2092]

@@aniaromanskacom Thanks a mil Anna, it worked:)

[@erling5148]

Nice but.... do NOT use the when you use the "default divi mega menu" it completely messes this up

[@aniaromanskacom]

Oh yes, definitely! You'd need to modify the selector and use li:not(.mega-menu) as the parent container for the ul.sub-menu I have to record a separate video on Divi mega menus 😉

[@erling5148]

@@aniaromanskacom that would be great. and what do you mean with: modify the selector and use li:not(.mega-menu)

[@aniaromanskacom]

@@erling5148 there are a few different selectors I used throughout the video, but for example, to only target default sub-menu and not change the width of the mega menu, instead of this: .dl-menu ul.sub-menu { width: 300px; } You could use this: .dl-menu li:not(.mega-menu) ul.sub-menu { width: 300px; }

[@erling5148]

@@aniaromanskacom Thanks i understand Thanks