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.