Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Foundation Topbar IE8 Fix
.lt-ie9 .top-bar {
background: #2f2f2f;
*zoom: 1;
overflow: visible;
}
.lt-ie9 .top-bar:before, .lt-ie9 .top-bar:after {
content: " ";
display: table;
}
.lt-ie9 .top-bar:after { clear: both; }
.lt-ie9 .top-bar .toggle-topbar { display: none; }
.lt-ie9 .top-bar .title-area { float: left; }
.lt-ie9 .top-bar .name h1 a { width: auto; }
.lt-ie9 .top-bar input,
.lt-ie9 .top-bar .button {
line-height: 2em;
font-size: 0.875em;
height: 2em;
padding: 0 10px;
position: relative;
top: 8px;
}
.lt-ie9 .top-bar.expanded { background: #111111; }
.lt-ie9 .contain-to-grid .top-bar {
max-width: 57.5em;
margin: 0 auto;
}
.lt-ie9 .top-bar-section {
-webkit-transition: none 0 0;
-moz-transition: none 0 0;
transition: none 0 0;
left: 0 !important;
}
.lt-ie9 .top-bar-section ul {
width: auto;
height: auto !important;
display: inline;
}
.lt-ie9 .top-bar-section ul li { float: left; }
.lt-ie9 .top-bar-section ul li > a { padding-right: 14px !important; }
.lt-ie9 .top-bar-section ul li .js-generated { display: none; }
.lt-ie9 .top-bar-section li a:not(.button) {
padding: 0 15px;
line-height: 45px;
background: #111111;
}
.lt-ie9 .top-bar-section li a:not(.button):hover { background: #2b2b2b; }
.lt-ie9 .top-bar-section .has-dropdown > a { padding-right: 35px !important; }
.lt-ie9 .top-bar-section .has-dropdown > a:after {
content: "";
display: block;
width: 0;
height: 0;
border: solid 5px;
border-color: rgba(255, 255, 255, 0.5) transparent transparent transparent;
margin-top: -2.5px;
}
.lt-ie9 .top-bar-section .has-dropdown.moved { position: relative; }
.lt-ie9 .top-bar-section .has-dropdown.moved > .dropdown { visibility: hidden; }
.lt-ie9 .top-bar-section .has-dropdown:hover > .dropdown,
.lt-ie9 .top-bar-section .has-dropdown:active > .dropdown { visibility: visible; }
.lt-ie9 .top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
border: none;
content: "\00bb";
margin-top: -7px;
right: 5px;
}
.lt-ie9 .top-bar-section .dropdown {
left: 0;
top: auto;
background: transparent;
}
.lt-ie9 .top-bar-section .dropdown li a {
line-height: 1;
white-space: nowrap;
padding: 7px 15px;
background: #1e1e1e;
}
.lt-ie9 .top-bar-section .dropdown li label {
white-space: nowrap;
background: #1e1e1e;
}
.lt-ie9 .top-bar-section .dropdown li .dropdown {
left: 100%;
top: 0;
}
.lt-ie9 .top-bar-section > ul > .divider {
border-bottom: none;
border-top: none;
border-right: solid 1px #2b2b2b;
border-left: solid 1px black;
clear: none;
height: 45px;
width: 0px;
}
.lt-ie9 .top-bar-section .has-form {
background: #111111;
padding: 0 15px;
height: 45px;
}
.lt-ie9 .top-bar-section ul.right li .dropdown {
left: auto;
right: 0;
}
.lt-ie9 .top-bar-section ul.right li .dropdown li .dropdown { right: 100%; }

You're my new favorite person. This is just what I needed. Thank you!

Items with dropdown is not clickable, or is it just me?

yfkar commented Apr 12, 2013

This saved me from a lot of headache, thanks!

You are wonderful!

gah, yea, my links aren't clickable and for some reason clicking anywhere on the entire page toggles the dropdown.

yarosla commented May 25, 2013

Looks awful. Does it actually work? Is it clickable, etc.?

Thanks mate! This saved me a lot of valuable time!

countfak commented Jul 5, 2013

Thanks! but links are not clickable...

I just added < meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
in the head of my html file. Without it IE kicks into quirks mode and breaks the top bar......at least on a couple sites I built. Its in the head of html5 BP.

Thanks!

jpawlyn commented Oct 18, 2013

Excellent, that was a life saver, thanks.

Thank you SO much for this, works great!

If anyone is wondering how to get the dropdown arrows to work in IE 8, I figured something out. The dropdown arrow is created using CSS border styles that IE 8 won't recognize.

Here's an easy way to override that and use an image for the arrows instead:

First, override the border completely:

.lt-ie9 .top-bar-section .has-dropdown > a:after {
 border: 0 none !important;
}

Next, add a background image to the dropdown > a and position it until it looks good, like so:

.lt-ie9 .top-bar-section .has-dropdown > a {
 background: url("/img/white-dropdown-arrow.png") no-repeat scroll 92% 18px transparent;
}

brexis commented Jan 5, 2014

thanks, this saves my life.

CPDA commented Jan 28, 2014

thanks!!! This save my brain.

Thanks for posting this. It just saved me a ton of time.
For those having problems with the drop down arrows not showing, instead of replacing with an image you can also just change the :after to use a double colon.

So .lt-ie9 .top-bar-section .has-dropdown > a:after
becomes .lt-ie9 .top-bar-section .has-dropdown > a::after.

This is an annoying thing with IE8 and using :before or :after. It wants a double colon. I tried it and it worked for me.

CMaso commented Apr 11, 2014

Thanks very much for this -- it looks good and the links work great. Hower, I've had some trouble getting the menu to toggle to the menu icon when the viewport gets small. The menu items just keep shifting left, until they disappear (at around 340px). My code is below if you (or anyone else) want to try it (your css code is contained in css/ie8topbarfix.css):

<!doctype html>
<!--[if lt IE 9]>
        <html class="no-js lt-ie9" lang="en">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bikes Rock! Foundation 5 Basic Features</title>
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/foundation.css" />
    <!--[if lt IE 9]>
        <link rel="stylesheet" href="css/ie8topbarfix.css">
    <![endif]-->

    <script src="js/vendor/modernizr.js"></script>
    <!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
      <script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
      <script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
    <![endif]-->
    </head>
    <body>
        <div class="fixed contain-to-grid"><!-- fixed class can cause topbar to overlap content on IE8 at small width-->
            <!--[if lt IE 9]>
                <nav class="top-bar">
            <![endif]-->
            <!--[if gt IE 8]><!--><nav class="top-bar" data-topbar="top-bar"><!--<![endif]-->
            <!--"data-topbar" by itself causes IE8 to throw JS error, but is necessary to make menu items appear when menu icon (appears at small width) is clicked. Alternate code may be necessary. Normally we'd just put data-topbar in tag all by itself, with no "=", but instead we're using data-topbar="topbar" to satisfy well-formed XML-->
                <ul class="title-area">
                    <li class="name">
                        <h1><a href="bikesrock.html">BikesRock</a></h1>
                    </li>
                     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
                    <li class="toggle-topbar menu-icon"><a href="">Menu</a></li><!--  toggle-topbar means appear when width is small-->
                </ul>
                <section class="top-bar-section">
                    <ul class="right">
                        <li class="divider"></li>
                        <li><a href="http://www.yahoo.com">About</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Contact</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Top Bikes</a></li>
                        <li class="divider"></li>
                    </ul>
                </section>
            </nav>
        </div>


        <!--[if lt IE 9]>
            <script src="js/vendor/jquery1.10.2.min.js"></script>
        <![endif]-->
        <![if !IE]>
            <script src="js/vendor/jquery2.1.0.js"></script>
        <![endif]>
        <script src="js/foundation.min.js"></script>
        <script>
          $(document).foundation();
        </script>
        <script src="js/rem.js"></script>
    </body>
</html>

gpspake commented Apr 24, 2014

This is great. Started sassifying for the lulz: https://gist.github.com/gpspake/11239576

Worked like a charm. Thank you!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment