How to Customize the Divi Menu Dropdown Icon
Welcome to part 4 of 12 in my Tutorial Tuesday series! Every Tuesday for 12 weeks, I’m dishing out video tutorials for my top requested questions on Design, Layouts or Tricks with WordPress and Divi.
This tutorial will show you How to Customize the Divi Menu Dropdown Icon. It’s a sweet, subtle little trick that’ll really help separate your menu design from other Divi websites. The menu design and methods used here are based on my previous tutorial, so be sure to check that out if you’re unsure how to add the menu icons or are unfamiliar with :before and :after elements in CSS.
Try this out for yourself and enjoy making your Divi menu stand out from the rest of the crowd! 🙂
Here's the CSS I used:
<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/*-----------------Menu Dropdown Icon---------------- */<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->#et-secondary-nav .menu-item-has-children>a:first-child:after, #top-menu .menu-item-has-children>a:first-child:after {<!-- [et_pb_line_break_holder] --> content: "45";<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->#et-secondary-nav .menu-item-has-children:hover>a:first-child:after, #top-menu .menu-item-has-children:hover>a:first-child:after {<!-- [et_pb_line_break_holder] --> content: "43";<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->Links mentioned in the video:
Similar Tutorials:
http://www.divithemeexamples.com/change-the-divi-dropdown-menu-arrow-to/
Are you ready to BUILD and GROW your web design business?
I've created a FREE 10-STEP ACTION PLAN to help you fast-track your web design success.
Thanks again Josh,
These tutorials are great – they do add that little extra to a Divi site that makes them more visually attractive.
Another classy addition to your CSS is to create a “slim horizontal” submenu bar rather than have the submenu links go down the page in rows. This is especially useful if there are several submenu links. The CSS can be found at https://divisoup.com/how-to-create-slim-horizontal-submenus/.
I look forward to more of your tutorials!
Cheers
Thanks, Eddie! Yeah Michelle’s tutorial is also a super-slick trick. All these methods combined = anything’s possible with Divi!
Thank you this tutorial, Josh. I didn’t even know that this was possible. It may come in handy for me one time.
No problem, Andrej! Yep, everything is possible with CSS 🙂 Hope you’re able to use that trick soon!
This kinds of tricks and hacks are real game changers. Keep them coming, Josh! You totally ROCK! 🙂
Thanks, Jae-Lex! I agree, it’s the little tips and tricks that really take Divi to a whole new level.
Dear Josh,
Your stuff is fantastic! Thank you for the effort you make to help people like me…
I would like to ask for a little more help… On this (temporary) site there are two dropdown menus. One of the “mother” menu items is clickable but the other isn’t. I’d like to state the difference between them with different icons, but the method in this tutorial changes both and I can’t figure out how to change only one of them.
Could you please help?
I would really appreciate it.
Thanks in advance.
Kind regards,
Rita
Hi Josh,
Thank you for your tutorials, they are fantastic!
Do you think it is possible to add different icons to the dropdowns? I’m working on a site where one of the “mother” menu items is clickable but the other is not and I’d like to make a difference in the dropdown icons to show this somehow…
I would really appreciate your help.
Kind regards,
Rita
Hey Rita,
Yeah absolutely. The same method in the tutorial should work for you, you’d just want to add the class to the sub menu item and not the parent menu item! Let me know if that works!
Hi Josh,
I’m unable to find which one it is. 🙁
Whatever I try, it is both or none…
I’m sorry.
Hi Josh,
Thank you for your reply. Unfortunately, I’m unable to find that item. Whatever I do, either both or none of them change. 🙁
I’m sorry
Rita