How to Remove the Drop Down Arrow in your Divi Menu
Updated March 2021
For anyone creating a custom menu in the Theme Builder – Use the second option of code.
This tutorial refers to the little down arrow that automatically appears when you have a drop down menu. It sits on the right side of the menu title and creates an uneven space between your drop down menu and the menu item next to it. If you’re a perfectionist like me and you have a drop down menu… you know exactly what I’m talking about. If you have never noticed the arrow before, I’m certain you’ll see it every time, now that I’ve pointed it out! Here is a very simple solution on how to remove it.
Copy your required code option in Step One. Step Two is pictured left for further clarification. Click on an image to enlarge.
Quick Reference: Copy the code in this tutorial – Click on “Divi” near the bottom of the left side menu – Paste code in “custom CSS” box at the bottom of the page – Click “Save Changes”
Step One – Copy your required code option below
Code Option One (Default Menu):
/* remove divi default effects for items with a drop down menu */
#top-menu .menu-item-has-children > a:first-child {padding-right: 0px; padding-bottom: 17px!important;}
#top-menu .menu-item-has-children > a:first-child:after{content: ‘ ‘; margin-top: -2px;}
#top-menu .menu-item-has-children {padding-right: 0px;}
Code Option Two (Theme Builder Menu):
/* remove divi default effects for items with a drop down menu */
.et-menu .menu-item-has-children > a:first-child {padding-right: 0px; padding-bottom: 17px!important;}
.et-menu .menu-item-has-children > a:first-child:after{content: ”; margin-top: -2px;}
.et-menu .menu-item-has-children {padding-right: 0px;}
Step Two – Add this code to your custom CSS section:
- Click on Divi near the bottom of your left side menu
- Scroll to the bottom of the open page and paste the code in the last section called “custom CSS”
- Click “Save Changes”
Other Available Tutorials:
Add an E-Mail Icon to your Main Menu
Email & Other Icon Links: This tutorial shows you how to add an email icon link to your main Divi menu. By default, if you enter your email address in the appearance section, it will display your address on the secondary menu bar (above the main) and...
Edit Divi Posts or Pages
When Editing a Page or Post: There is no simple description on how to edit Divi posts or pages. There are simply too many options available in each item or module. Here, I am going to give you the starting blocks to editing your Divi posts or pages. ...
How to Save and Load a Layout in the Divi Library
What is the Divi Library and why save or load an existing layout: The Divi Library is place that stores pre-made layout templates as well as your custom saved layouts, modules and widgets. Save a layout to the Divi Library if you would like to use it as a template...
Create a Post in Divi – Beginners Guide
Q: Why create a post and how is it different from a page? Posts are pages of information that belong to or fall under a main topic. They are built just like pages with one big difference. When you create a post, you can assign it to a category which...
How to Update Plugins in WordPress
What is a Plugin and Why Update: Plugins are like little programs that work with the main software to help further customize design and function of your website. You need to keep them updated, or they can become a security risk or may not function...
This doesn’t work for me unfortunately. Any ideas?
Hi Amanda,
This one has been a bit finicky lately. Sometimes it works and sometimes it doesn’t. Currently it’s the only solution I know of. You could try asking Elegant Themes for a fix.
Updated!! – added bottom line for it to work properly
Code Option One (Default Menu):
/* remove divi default effects for items with a drop down menu */
#top-menu .menu-item-has-children > a:first-child {padding-right: 0px; padding-bottom: 17px!important;}
#top-menu .menu-item-has-children > a:first-child:after{content: ‘ ‘; margin-top: -2px;}
#top-menu .menu-item-has-children {padding-right: 0px;}
.menu-item-has-children a::after {display: none;}
Perfect! Thank you so very much.
It works for me. Thanks
I had to re-write part of the code to reflect what it shows here in your post, because copy/paste changes it (maybe due to some text formatting).
Here is what the copy/paste changed:
Line 1 – It added an extra space between “#” and “top-menu”; it added a formatting to the same first “#top-menu” (I had to delete it and write it again).
Line 3 – The quote marks need to be erased and re entered.
Divi’s Custom CSS Editor shows where the code is not copied properly.
Thanks!
Nice, although i used this:
#top-menu .menu-item-has-children > a:first-child::after, .fullwidth-menu .menu-item-has-children > a:first-child::after, #et-secondary-nav .menu-item-has-children > a:first-child::after {
display: none;
}
But can you remove only the top-level arrow, so that the arrows for submenus in the dropdown stay visible?
This is the full snippet that worked for me to both a) remove the arrow and b) adjust the spacing.
/* remove divi default effects for items with a drop down menu */
#top-menu .menu-item-has-children > a:first-child {padding-right: 0px; padding-bottom: 17px!important;}
#top-menu .menu-item-has-children > a:first-child:after{display: none; margin-top: -2px;}
#top-menu .menu-item-has-children {padding-right: 0px;}
Thanks for this quick tutorial dear poster.
Thanks too dear SUELI, the observation worked for me.
You all are amazing.
This code did work for me, thankfully. The original above didn’t. Thank you Greg and Samantha for your help 🙂
Yay! That worked! I would like to increase the space between items a little more though, but the arrows are gone! Thanks.
Thanks Greg, that worked for me mate!
God bless OP and the folks that responded in the comments with adjustments. I love you all!
This did not work for me, it just shrunk my menu in more and removed the space between items.
Hello everyone,
the second option partly worked for me, but theere remained a gap where the icon had been removed.
The clue was to put the last line first.
So, this is the code that did it for me:
.et-menu .menu-item-has-children>a:first-child {padding-right: 0px;}
.et-menu .menu-item-has-children > a:first-child {padding-right: 0px; padding-bottom: 17px!important;}
.et-menu .menu-item-has-children > a:first-child:after{content: ”; margin-top: -2px;}