Skip to main content

Divi Mega Menu: Removing Arrows/Chevrons from Menu Items

To streamline the appearance of your Divi Mega Menu and achieve a sleeker design, you may wish to remove the arrows or chevrons that traditionally appear next to parent items in the menu. This can be easily accomplished by adding a snippet of CSS to your website. Follow the steps below to remove these visual indicators from your menu items.

Step 1: Add Custom CSS​

  1. Navigate to Theme Options: Log into your WordPress dashboard and go to Divi > Theme Options to access the customization settings for your Divi theme.
  2. Locate Custom CSS Section: Scroll down to find the "Custom CSS" box within the Theme Options. This area allows you to add custom CSS code that will apply globally across your site.
  3. Add CSS Code: Copy and paste the following CSS snippet into the Custom CSS box:
.de-mega-menu-item.menu-item-has-children>a:after {
    display: none !important;
}

.de-mega-menu-item.menu-item-has-children a{
    padding-right: 0  !important;
}

Step 2: Save​

After adding the CSS code, make sure to click on "Save Changes" to apply the modifications to your website.

Additional Information​

  1. Preview Your Changes: It's always a good idea to preview your website after making CSS changes to ensure that the desired effect has been achieved and that there are no unintended consequences on your site's layout or design.
  2. Customization: Feel free to tweak or expand upon the provided CSS snippet if you wish to customize the appearance of your menu further. For instance, you might want to add custom icons in place of the removed arrows or adjust other aspects of the menu's design.
Last updated on