.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%; } |
This comment has been minimized.
This comment has been minimized.
Items with dropdown is not clickable, or is it just me? |
This comment has been minimized.
This comment has been minimized.
This saved me from a lot of headache, thanks! |
This comment has been minimized.
This comment has been minimized.
You are wonderful! |
This comment has been minimized.
This comment has been minimized.
gah, yea, my links aren't clickable and for some reason clicking anywhere on the entire page toggles the dropdown. |
This comment has been minimized.
This comment has been minimized.
Looks awful. Does it actually work? Is it clickable, etc.? |
This comment has been minimized.
This comment has been minimized.
Thanks mate! This saved me a lot of valuable time! |
This comment has been minimized.
This comment has been minimized.
Thanks! but links are not clickable... |
This comment has been minimized.
This comment has been minimized.
I just added < meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" > |
This comment has been minimized.
This comment has been minimized.
Thanks! |
This comment has been minimized.
This comment has been minimized.
Excellent, that was a life saver, thanks. |
This comment has been minimized.
This comment has been minimized.
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:
Next, add a background image to the dropdown > a and position it until it looks good, like so:
|
This comment has been minimized.
This comment has been minimized.
thanks, this saves my life. |
This comment has been minimized.
This comment has been minimized.
thanks!!! This save my brain. |
This comment has been minimized.
This comment has been minimized.
Thanks for posting this. It just saved me a ton of time. So 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. |
This comment has been minimized.
This comment has been minimized.
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):
|
This comment has been minimized.
This comment has been minimized.
This is great. Started sassifying for the lulz: https://gist.github.com/gpspake/11239576 |
This comment has been minimized.
This comment has been minimized.
Worked like a charm. Thank you!!! |
This comment has been minimized.
You're my new favorite person. This is just what I needed. Thank you!