Skip to main content

Divi Mega Menu: Fixing Mega Menu on Scroll with Sticky Header

Implementing a sticky header that behaves correctly on scroll enhances the user experience by ensuring that your site’s navigation is always accessible. However, when using Divi Mega Menu, you may need to apply additional CSS to ensure the mega menu remains functional and visually consistent with your sticky header. This documentation outlines the steps to apply the necessary CSS adjustments within the Divi Theme to achieve a seamless sticky header and mega menu integration.

Step 1: Prepare Your CSS Code​

To fix the mega menu when scrolling with a sticky header, you will need to apply the following CSS:

.de-mega-menu {
    position: fixed !important;
}

This CSS ensures that your mega menu remains fixed at the top of the page alongside your sticky header, maintaining full width and applying a subtle shadow for depth, enhancing the visual separation from the page content.

Step 2: Add CSS to Your WordPress Site​

  1. Access Divi Theme Options: Log into your WordPress dashboard, navigate to Divi > Theme Options to open the theme's customization settings.
  2. Locate the Custom CSS Field: Scroll down to the "Custom CSS" section within the Theme Options. This area allows for the addition of custom CSS that will apply globally across your site.
  3. Insert the CSS Code: Copy the CSS snippet provided above and paste it into the Custom CSS field. This will apply the styling necessary to fix the mega menu behavior with your sticky header on scroll.
  4. Save Changes: Click on the "Save Changes" button to apply your CSS adjustments. It is crucial to save your changes to ensure the new styles are active on your site.

Additional Tips:​

  1. Testing: After implementing the CSS, visit your site and scroll to ensure the mega menu and sticky header behave as expected. It’s important to test across multiple devices and browsers to ensure consistency.
  2. Adjustments: Depending on your specific header and mega menu setup, further adjustments to the CSS may be necessary. Consider the overall look and feel of your site when making modifications.
  3. Performance: While custom CSS is a powerful tool for customization, it’s important to keep your site’s performance in mind. Ensure that added styles are optimized and do not adversely affect your site’s load times.
Last updated on