If you like the Foundation CSS framework, you probably know that a new version 5 came out a couple of weeks ago. One of the new features Offcanvas menu is a nice addition to the most advanced responsive front-end framework in the world. While it works like a charm straight out of the box, you might run into an issue in IE9.
The issue
The offcanvas menu should be hidden by default and only appear on a small screen devices. What happens in IE9 is that the offcanvas menu appears on top of your content and is visible also on a large screen sizes. The fix is very simple, small tweak to your html doctype will do the trick.
The solution
Before:
<!DOCTYPE html> <!--[if IE 7]> <html class="ie ie7" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 8]> <html class="ie ie8" <?php language_attributes(); ?>> <![endif]--> <!--[if !(IE 7) | !(IE 8) ]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->
After:
<!DOCTYPE html> <!--[if IE 7]> <html class="no-js ie ie7" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 8]> <html class="no-js ie ie8" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 9]> <html class="no-js lt-ie10" <?php language_attributes(); ?>> <![endif]--> <!--[if !(IE 7) | !(IE 8) ]><!--> <html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->
Simply add the conditional comment for IE9 and enjoy a fully working off-canvas menu. The example above is using WordPress TwentyThirteen html doctype, feel free to adjust it to suit your own project.
Conclusion
Did this help to fix the same issue in IE9? Let me know in the comment below. Happy coding.
Like What You're Reading?
Sign up to receive my future tutorials and demos straight to your inbox.
No spam, Unsubscribe at any time.
amazing! very useful. thanks!