Divi Menu Module Sub-Menu Dropdown Styling: the Ultimate Guide
If you'd like to see the demo page I was working on, you can take a look here: https://demos.divilover.com/tutorials/styling-dropdown-menu/
Here's a quick timestamp reference for your convenience:
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
I hope you found this tutorial useful and easy to follow. Don't hesitate to give me a comment with your thoughts!
And if you'd like to understand CSS in Divi better and use it with more confidence, join my Free 5-Day CSS & Divi Challenge! You'll find all the details here: https://css.divilover.com
Best,
~ Ania
Тэги:
#divi_menu_customization #divi_theme #divi #submenu #dropdown #sub-menu #menu_module #divi_tutorial #div_css_tutorial #div_css #div_css_layout #divi_menu #divi_menu_moduleКомментарии:
Great tutorial Ania. Thank you!
Ответить
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
Ответить
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...
Ответить
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.
Ответить
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
Ответить
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!
Ответить
Brilliant as usual, thanks Ania!
Ответить
AWESOME Tutorial Annia, as usual.
I have learned using divi with your valued tutorials.
Thanks so much!
All the best.
Nice but.... do NOT use the when you use the "default divi mega menu" it completely messes this up
Ответить
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...
Ответить
Very nice, will there be a tutorial for mobile menu as well 😁
Ответить
Thank you so much Ania such a pleasant to follow your tutorials
Ответить
Very good tips, thanks for the video... what a joy to see you sharing such valuable tips again.
Ответить
