Skip to content

Instantly share code, notes, and snippets.

@tmayr
Created March 18, 2013 20:34
Show Gist options
  • Star 35 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • Save tmayr/5190565 to your computer and use it in GitHub Desktop.
Save tmayr/5190565 to your computer and use it in GitHub Desktop.
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%; }
@21msweeney
Copy link

Worked like a charm. Thank you!!!

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