How to Customize the Divi Menu Dropdown Icon

by | Sep 12, 2017 | Divi Tutorial | 11 comments

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] -->