Foundation 6 Menu Arrows CSS Fix For IE11

I’ve been playing with the front-end framework Foundation for a few months. I dove in when Foundation was at version 5.5 and now they are at 6. I really liked, and still like, Foundation… though I find version 6 is a little more difficult to tweak/use than version 5.5. There are more than a few rants on the net right now about Foundation 6 perhaps being released a little early.

The particular issue I ran into today before going into a production environment was how Internet Explorer 11 was rendering the little drop-down arrows when sub-menu options are available. The <li> class is “menu-item has-submenu is-dropdown-submenu-parent is-right-arrow opens-right”. Yours might not be identical but should help you identify what you are looking for.

Here’s how the menu looked rendered correctly:

Foundation Menu Arrows

Here’s what IE was doing to it:

Foundation Menu Arrows IE

Here’s what I came up with for a fix:

Use the dev tools in IE I changed the <a> tag to display: inline-block from the current setting display: block. This seemed to fix what was happening in IE and didn’t effect Firefox or Chrome. Though, when checking what it did for mobile, when the menu on smaller screen sizes turned to a vertical layout as opposed to a drop down of course the <a> link wasn’t the full width of the device. So the solution was implement the CSS display: inline-block for the <a> within a media query so it was only applied to Foundation’s medium up sizes (min-width 40em).

Here’s what the original CSS looked like without modification (foundation.css):

Here’s my addition later on down the stylesheet:

Hope this can help others and wish I could share more as to why this was happening in IE11. I thought maybe it wasn’t respecting the REM units but caniuse.com says it’s all good.

Tags: , , ,

One Response

Leave a Reply

Other tags used in my blog:

 (1)  (6)  (1)  (16)  (1)  (1)  (17)  (1)  (16)  (1)  (1)  (7)  (1)  (4)  (15)  (5)  (2)  (27)  (9)  (1)  (11)  (4)  (4)  (4)  (8)  (1)  (6)  (1)  (4)  (1)  (1)  (1)  (3)  (1)  (3)  (4)  (7)  (3)  (3)  (4)  (1)  (1)  (2)  (1)  (7)  (10)  (12)  (2)  (6)  (1)  (3)  (16)  (2)  (3)  (1)  (5)  (1)  (27)  (4)  (4)  (9)