Skip to main content

Divi Mega Menu: Centering a Mega Menu with Custom CSS

To enhance the visual appeal and user experience of your website, centering the Mega Menu can be a strategic design choice. This process involves adding a snippet of custom CSS to your Divi site. Follow the steps below to center your Mega Menu, creating a balanced and professional look for your website's navigation.

Step 1: Add Custom CSS for Centering Mega Menu​

  1. Navigate to Theme Options: Log into your WordPress dashboard and go to Divi > Theme Options. This area allows you to customize various aspects of your Divi theme globally.
  2. Access Custom CSS Section: Scroll down to the "Custom CSS" box within the Theme Options. This section is dedicated to adding your own CSS code, which can override the default styling of Divi and its modules, including the Mega Menu.
  3. Insert CSS Code: Copy and paste the following CSS snippet into the Custom CSS box:
body .de-mega-menu {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
}

Step 2: Save​

After pasting the CSS code, click on "Save Changes" to apply the modification. It's important to save your changes to ensure the CSS is applied across your site.

Additional Information​

  1. Preview and Test: After applying the custom CSS, preview your website to see the changes in action. It's essential to test the menu's appearance on different devices and screen sizes to ensure consistent centering across all platforms.
  2. Adjustments: Depending on your site's specific header layout and existing CSS, you may need to adjust the provided CSS snippet. Consider tweaking the CSS if the menu is not perfectly centered or if it conflicts with other elements.
  3. Performance: Keep in mind that adding excessive custom CSS can impact your site's loading times. Ensure that the CSS you add is necessary and optimized for performance.
Last updated on