Mega Menu compatibility issues with Internet Explorer



Has anyone had compatibility issues viewing pages built with the Mega Menu stack on Internet Explorer? More importantly - is there a workaround?

Yes, I know IE is the worst imaginable browser and having it unceremoneously dumped onto the scrapheap of history would be the finest thing ever to happen for the future of the Internet … but unfortunately there are still lots of users, particularly in the corporate space. Hence I need to allow for it.

The problem I’m experiencing is the stack immediately below Mega Menu is being shunted off to the right hand side of the page. However, if I scroll down the page just a fraction, it auto-magically pops back. This seems to happen irrespective of the stack that I have immediately below Mega Menu. It’s happened with the Foundry Banner stack, and with the Big White Duck “Sections Pro” stack (which I eventually ended up using in place of the Thunderpack Backdrop and Sections stacks).

  • I’ve tested IE 11 on Windows 8, which has this issue.
  • Chrome on Windows 8 seems fine
  • I’m unsure if Microsoft Edge has the same problem as I don’t currently have a machine to test with. But I assume the problem is purely IE.

See screenshots below
Page being tested is:

Scrolling down a bit, the graphic pops back into place.

Same issue happens with the Foundry Banner stack.
Page is:

Viewing in Chrome is fine.

If I REMOVE Mega Menu, then view in Internet Explorer, the graphic appears in the right place. Hence my suspicion that this is the source of the compatibility issue.
Page is:

Coincidentally, even when viewing in Chrome on my Mac (Mojave) I’ve noticed that the graphics initially appear on the right-hand side, then very quickly snap into the correct place a moment later. Hence I think there might be something behind the scenes with HTML/css code that’s correctly formatting the display in most browsers but which is missing in IE.

If anyone has any ideas for workarounds it would be appreciated. I don’t particularly like IE but I figure that I need to support it.



FYI Win10 Edge and IE11 both show the same problem detailed above.


Thanks. Good to know … although that means I definitely need a solution.
It might simply be options or something that I’ve done (or not done) in the stack. Hopefully its quick and simple to resolve though.



Good morning @andrewmercer

Since we’re going to be troubleshooting in Windows, and you have a page there with a lot of stuff going on, perhaps you can do me a favor so I can help troubleshoot your problem for you. Can you create a one-page project file for me, with as few elements as possible, that still recreates this problem? This will help us narrow in a bit on the problem and see if we can’t get you a solution. When you have a simple project file for me, shoot it over in a ZIP file to adam at elixirgraphics dot com so I can have a look.

When you send that also make sure you include any non-Foundry stacks you end up using in the simplified project file. If you can recreate it without any additional, non-Foundry stacks that would be ideal.

Last but not least, let me know what version of the following you’re using in case it ends up mattering as well:



Thanks Adam

That would be fantastic. I’ll set up the page and will shoot through the project file - although it might take a day or so. You’re right. Having a short simple page and project file will make the diagnosis simpler.

Sorry. Ensuring support for those Microsoft browsers (and their non-standard way of doing things) has always been a real pain.

Much appreciated. Cheers.


Look forward to getting your project file. I’m in the office until about 1pm EST tomorrow and then have a few days off. I’ll get it looked at as soon as possible. The sooner I can get it the better, but I know people are busy, much like myself, so get it over to me when you can. :+1: