Instantly share code, notes, and snippets.

Embed
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%; }
@minamarkham

This comment has been minimized.

minamarkham commented Mar 28, 2013

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

@marcelotorres

This comment has been minimized.

marcelotorres commented Apr 8, 2013

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

@yfkar

This comment has been minimized.

yfkar commented Apr 12, 2013

This saved me from a lot of headache, thanks!

@sforsparky

This comment has been minimized.

sforsparky commented Apr 30, 2013

You are wonderful!

@sforsparky

This comment has been minimized.

sforsparky commented May 2, 2013

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

@yarosla

This comment has been minimized.

yarosla commented May 25, 2013

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

@seniorpreacher

This comment has been minimized.

seniorpreacher commented Jun 12, 2013

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

@countfak

This comment has been minimized.

countfak commented Jul 5, 2013

Thanks! but links are not clickable...

@jasonLocke

This comment has been minimized.

jasonLocke commented Jul 8, 2013

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.

@tazcarper

This comment has been minimized.

tazcarper commented Jul 30, 2013

Thanks!

@jpawlyn

This comment has been minimized.

jpawlyn commented Oct 18, 2013

Excellent, that was a life saver, thanks.

@AmberJune

This comment has been minimized.

AmberJune commented Dec 11, 2013

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

This comment has been minimized.

brexis commented Jan 5, 2014

thanks, this saves my life.

@CPDA

This comment has been minimized.

CPDA commented Jan 28, 2014

thanks!!! This save my brain.

@zombiGoats

This comment has been minimized.

zombiGoats commented Mar 14, 2014

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

This comment has been minimized.

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

This comment has been minimized.

gpspake commented Apr 24, 2014

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

@21msweeney

This comment has been minimized.

21msweeney commented Jul 18, 2014

Worked like a charm. Thank you!!!

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