0

I have a navbar with a custom breakpoint of 990px in which it will collapse after that point. The navbar works fine in modern browsers, but in IE8 it does not. I do have respond.js and html5shiv polyfills in my HEAD, so I am unsure why IE8 is not respecting my NAVBAR media queries. Does anyone have any idea as to what is going on?

My demo is here.

@media (max-width: 990px) {
.navbar-header {
float: none;
}
.navbar-left, .navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in {
display:block !important;
}
}

@media (max-width: 991px) {
#desktopNav {
display: none;
}
}

 @media (min-width: 992px) {
#mobileNav {
display: none;
}
}

HTML code for navbar:

<header class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="logo"><a href="#"><img src="http://placehold.it/222x102" width="222" height="102"></a></h1>
<nav id="mobileNav" class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mobileNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="collapse navbar-collapse" id="mobileNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
</ul>
</div>
</nav>
<nav id="desktopNav" role="navigation">
<ul class="nav nav-pills pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Products and Services</a></li>
<li><a href="#">Showcase</a></li>
<!--          <li><a href="#">About</a></li>-->
<li><a href="#">Order Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
<!--/.col-lg-12--> 
</div>
<!--/.row--> 
</header>

Head tag:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Site</title>
<link href="css/bootstrap.css" rel="stylesheet">
<style>
 <!-- css here -->
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
redshift
  • 4,815
  • 13
  • 75
  • 138

2 Answers2

2

Respond.js has known issues with IE8. You can't use @import statements on IE8 and Respond.js. If your css is on CDN you need to perform additional setup steps to get Respond.js running with IE8.

IE8 doesn't support the boxing model, so property box-boxing cannot be combined with max-heigth, min-height, min-width and max-width.

Check of you hace one of these issues, and see the Respond.js documentation

Mr Rivero
  • 1,248
  • 7
  • 17
  • I looked into this and everything seems to be OK, so it just seems that IE8 is not respecting this code: @media (max-width: 991px) { #desktopNav { display: none; } } – redshift Jul 22 '14 at 12:10
0

It seems that your media query is not working in the IE8.

So, Use css3-mediaqueries-js instead of respond.js.

Put this code in your head tag.

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Also, you can check this two answers as well.

Answer 1

Answer 2

Community
  • 1
  • 1
Husen
  • 955
  • 1
  • 6
  • 16
  • Tried that, didn't fix the problem:( – redshift Jul 22 '14 at 11:27
  • i think it may version problem in media.js. I 've latest version for that js and put that code on the jsfiddle : http://jsfiddle.net/eE25U/ : Also, this time use respond.js along with this new media.js – Husen Jul 22 '14 at 12:00