Inline Navigation issue with Internet Explorer 11

[lbi_debase]

Hi! When testing in Internet Explorer the inline navigation menu dropdown is only working for the 1st top link with dropdown items. For this link where the dropdown is working, the sub-menu is opening to the right rather than beneath. The navigation looks great in Chrome, Safari and other desktop browsers, but a portion of the website audience will still be using IE11 so need to find a way to make the dropdown work on this browser as well.

Is there a workaround or solution for the dropdowns to appear as expected in IE11?

[kory]

Hello @lbi_debase!

Thanks for writing in and sorry to hear that you’re having some issues with your dropdowns in IE11. Dropdowns have always worked in IE11, but after looking at your site it seems that the proper styles are not getting populated via JavaScript at this time. I have added a note in our issue tracker to look into this and hopefully get a fix out in our next release. For the time being, you can introduce the following CSS into your project globally and it should help position things in IE11 the way you’d expect in other browsers:

.no-preserve3d .x-masthead [data-x-stem] {
  top: 100%;
  right: 0;
}

.no-preserve3d .x-masthead [data-x-stem] [data-x-stem] {
  top: 0;
  right: 100%;
}

What’s going on above is that our dropdowns are powered by a custom positioning library we’ve written called “Stem.js,” which allows us to dynamically reposition dropdowns responsively on different screen sizes. Since this is not firing at the moment, it’s not giving the proper value to the [data-x-stem] attribute on the dropdowns, which is giving them the incorrect positioning. The first selector above targets the first level dropdowns in your menu, and the second selector targets the second level dropdowns in your menu by focusing on this attribute. This should mimic what you’re seeing in other browsers.

The .no-preserve3d class is something that is added to IE11 via Modernizr, which allows us to silo these stiles to IE11 only, ensuring we don’t alter something else inadvertently, and the .x-masthead class simply further silos these styles to only dropdowns within the header of your site.

This should get things working for you at the moment while we look into this issue further in IE11.

[lbi_debase]

Hi @kory,

Thanks very much for the information and CSS. It’s fixed the 1st top-level dropdown menu (under ‘Community’) however the sub-menu within this still isn’t displaying (under ‘Community’ > ‘Grants’).

The 2nd top-level dropdown menu (under ‘News’) is also still not displaying in IE. Any suggestions to fix this?

[rad]

Hi Rachel,

The sub-menu is actually a known issue for IE which recently fixed on our unreleased version. And it’s caused by a javascript error, Please stay tuned for the next update. Or please install the copy that I’ll provide in the secure note as a temporary fix.

Thanks!

[lbi_debase]

Hi @rad,

Thank you for the updated copy with the IE fix. This looks to have fixed the menu issue in IE.

Greatly appreciated and thanks!

[christian]

You’re welcome. Glad we’re able to help.

[dshakya]

Hi Rad,

I have the same issue as well where the dropdowns are not showing at all if there are more than one submenu items. Could you please send me the unreleased patch as well?

[christopher]

Hi @dshakya,

I am going to send the link directly to you as you can not see the Secure Note for this thread because you are not the original poster of the thread.

Kindly check your forum direct messages.

Thank you.