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
- Go to the Elegant Themes Icon Font list and select your icon.
- 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)
- Copy the code below into your Theme Options Custom CSS box or into your style.css in a child theme
- 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: "\43";
}
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"; color:#ff0000;
}
#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";
}
Thanks. This works!!
How would I best add a different icon solely to the second level of parent drop-downs in the top nav?
Hi Craig, Following your post above I have successfully changed the symbol BUT when using the \002b which should give me a + sign I get another symbol. I have tested it and not of the symbol ISO relate to the ones listed. What is your advice please?
try “\4c”
Why is this not an option within the Divi Builder? The Custom CSS is easy enough but why not have an option of icons within the dropdown menu options?
ET could add an option for a million different things some users want, but Divi would soon become unusable
Weird. I tried this but it didn’t work. I installed the font but the Theme Options didn’t like it.
Picture here.
Sorry, the code in the post was broken. should work now. thanks
Thanks for the response. Do you mean that you updated the code above?
yes, the > had been replaced within the syntax plugin
Thanks. I get no CSS error but I still see the normal downward arrows.
Just tested and it works for me . \43 is pretty similar to the default (a down triangle)
#et-secondary-nav .menu-item-has-children>a:first-child:after, #top-menu .menu-item-has-children>a:first-child:after {
content: “\4c”; color:#ff0000;
}
#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”;
}
added to theme options.
did you have old code somewhere still?
this adds a red + and + in circle on hover
Weird. I’m using the current code but it’s not appearing. It’s not a cache issue. Perhaps a CSS conflict?