There might be times you might want to remove the drop down arrow from divi’s primary menu bar. Let’s see how we can do this. By default when you have sub menu items in your primary menu, you will notice that there is a small arrow to the right of the parent menu. I think this is a good desirable feature for your menu as it is a good visual indicator for a user that there are sub-menu items under this main menu item.

Recently I was working on a website for a client, who wanted a clean look and wanted me to remove the drop down arrow from the primary menu.

The image below shows the arrow on the drop down menu.

Drop Down Arrow - Primary Menu DIVI

Drop Down Menu Arrow in DIVI

 

Remove the drop down menu with CSS

With a little bit of CSS I was able to remove the arrow for my client. The sub menus are still visible when you hover over the main menu. While I like the drop down arrow, I removed it because that is what my client wanted.

Head over to your style.css in your child theme and paste the following CSS. Alternatively you can also go to DIVI -> Theme Options and paste the css in the Custom CSS box.

/* Remove the down arrow from divi’s primary menu */
‪#top-menu .menu-item-has-children > a:first-child:after{content: ” ;}
#top-menu .menu-item-has-children {padding-right: 0px;}

 

Drop Down Arrow Removed - Primary Menu DIVI

Drop Down Arrow Removed

The CSS looks for all the top-menu items that have any children (sub-menu) and replaces the content (down arrow) with a blank space. The second line of CSS also removes any extra padding to the right of the menu which have sub-items.

The menu still functions normally, showing the sub menus on hover.

Hope this tip help you and if you have any questions feel free to leave a comment.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

I would love to hear about how I can help your business website. I have specialized in using the DIVI theme from Elegant Themes since the past five years. If you would like to see the projects that I have completed as a DIVI Designer, please do have a look at my portfolio. Please contact me and I will get back to you immediately.