Change the Divi dropdown menu arrow to +

The main navigation menu in Divi will add a down arrow icon to any parent navigation items that have sub-menu links within, to let your users know that there are more menu links available.

The image below shows the default sub-menu drop-down icon on the left as a blue down arrow. If you want to replace this icon with an icon of your own then you can add some custom CSS code into your Theme Options or a child theme. You can also change the icon for hover states so that it changes when your user hovers over the parent menu item. You can change anything you like using CSS, but as you can see in the right-hand side we have just changed the icon and the color.

How to add a new icon to the Divi sub-menu dropdown

1. Go to the Elegant Themes Icon Font list and select your icon.
2. Take the 2 characters between the x and the ; (for our plus icon the full code is L so we only need to take the 4c)
3. Copy the code below into your Theme Options Custom CSS box or into your style.css in a child theme
4. If you want to change the icon for another, just replace the 4c for the icon characters you want to add

/* Divi menu dropdown icon */
 
#et-secondary-nav .menu-item-has-children>a:first-child:after, #top-menu .menu-item-has-children>a:first-child:after {
    content: "\4c";
}

Add a different icon and color for menu item hover

If you want to add a different icon and change its color for when the user hovers over the menu item link you can update your CSS code to include a hover state. The code below adds an icon code of \50 (a plus in a circle) and gives it a color of #ff0000 for the hover state. Just update the icon characters and hex color code as required.

#et-secondary-nav .menu-item-has-children>a:first-child:after, #top-menu .menu-item-has-children>a:first-child:after {
content: "\4c";
}

#et-secondary-nav .menu-item-has-children:hover>a:first-child:after, #top-menu .menu-item-has-children:hover>a:first-child:after {
content: "\50";
color:#ff0000;

}