Solved A Number of issues with the mega menu in divi blocks

That's because you're using position fixed for the both the header sections & your first header section changes height based on the logo height on different screen size.

I would suggest you to just move the menu row to the first section & delete the empty menu section.

We coded it in a way that if the mega menu width is equal or bigger than the menu row width, then only it will align in the middle of the screen.

So, you just have to go to the mega menu section settings & set the max-width to be 1350px (your menu row width).

You cannot use menu module because it will become a nested menu module, which will cause lots of Divi menu CSS conflict:
1. Nested menu module is thought to be a submenu, that's why the default Divi menu CSS hide it.
2. Our mega menu will be loaded in the nested menu module as well.
3. And many more conflicts.

Thus, you will have to use a Text module instead & add link to the Text Module Settings > Link > Module Link URL
**Similar to what we did on our premade mega menu design:

 

What if you set both sections to be stick to top:
**Instead of position fixed.

 

Glad that it all works for you.

It would be great if you could drop us a review here: https://divi.help/forums/customer-testimonials.176/
**It's greatly appreciated.

 

For these links:



You should make it 1 link per text module & add the link through: Text Module Settings > Link > Module Link URL

If you use the HTML link in the content editor, you will have conflict with the default Divi menu CSS as well, where it consider your link as submenu links. It might not be noticeable in the desktop, but you will notice the issue at mobile menu.