Why Bootstrap 3 Navbar Dropdown Doesn't Work in IE8

Twitter bootstrap 3 RC2 - Navigation in IE8 not working

Hope this helps...

From http://getbootstrap.com/getting-started/ :

    <!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) -->
    <script src="js/respond.js"></script>
</body>

Bootstrap 3.3.7, navbar dropdown doesn't closes after 1st time clicking 2nd time on the same navbar dropdown item

So I could not find any other option why by default it doesn't work, but I found bug in my jquery code that should remove open class from dropdown, so from this:

    $(".solution-dropdown").click(function(event) {
        event.preventDefault()
        console.log('goes here1')

        $(".dropdown.open").removeClass("open");
    });
    
    $(".resources-dropdown").click(function(event) {
        event.preventDefault()
        console.log('goes here2')
        $(".dropdown.open").removeClass("open");
    });
    
    $(".company-dropdown").click(function(event) {
        event.preventDefault()
        console.log('goes here3')
        $(".dropdown.open").removeClass("open");
    });

I have changed to

    $(".nav-link").click(function(event) {
        event.preventDefault()
        $(".dropdown.open").removeClass("open");
    });

That solved problem.

Bootstrap navbar dropdown is partly hidden in IE8 - why?

Adding z-index to the Bootstrap .dropdown class (simply override it in your CSS file) should solve your problem.

Note that z-index will not work on a static element, like .navbar-inverse.

Elements must be positioned, e.g. relatively or absolutely.

Also z-index value shouldn't be random, but just as high/low as it needs to be.

If this doesn't fix it, I remember to have read somewhere that IE8 has issues with CSS filter property, which is used throughout Bootstrap css for gradients etc.

The solution is to add filter:none!important; to an element like .navbar or .navbar-inner or .dropdown.

Here's where I read about it.

I hope it helps.

IE8 issue with Twitter Bootstrap 3

You got your CSS from CDN (bootstrapcdn.com) respond.js only works for local files. So try your website on IE8 with a local copy of bootstrap.css. Or read: CDN/X-Domain Setup

Note See also: https://github.com/scottjehl/Respond/pull/206

Update:

Please read: http://getbootstrap.com/getting-started/#support

In addition, Internet Explorer 8 requires the use of respond.js to enable media query support.

See also: https://github.com/scottjehl/Respond

For this reason the basic template contains these lines in the head section:

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="../../assets/js/html5shiv.js"></script>
  <script src="../../assets/js/respond.min.js"></script>
<![endif]-->

Bootstrap 3 navs, dropdowns, tabs (still) not working in IE8

The answer turned out to be the wrong linked older version of jquery. I had linked to 1.11.1 and not 1.11.3. Linking to 1.11.3 resolved the issue.

Bootstrap 3 collapsed menu not working on mobile screen

You need to put at least a class of navbar on your nav tag. But apperently there was something else wrong so here is a working example of the default navbar. From there you can change the CSS to your liking. I also added one change to make the dropdowns appear on hover.

https://jsfiddle.net/gno4zcrr/1/

.dropdown:hover .dropdown-menu {   display: block;}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">  <div class="container">    <!-- Brand and toggle get grouped for better mobile display -->    <div class="navbar-header">      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">        <span class="sr-only">Toggle navigation</span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>      </button>      <a class="navbar-brand" href="http://greenlux.pt">        <img src="http://greenlux.pt/logo_gl.png" width="125" height="21" alt="Sample Image" />      </a>    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">GU10</a> </li>
        <li class="dropdown">          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">E27 <span class="caret"></span></a>          <ul class="dropdown-menu">            <li><a href="#">Par30</a> </li>            <li><a href="#">Par38</a> </li>          </ul>        </li>

        <li class="dropdown">          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">R7S <span class="caret"></span></a>          <ul class="dropdown-menu">            <li role="separator" class="divider"></li>            <li> 360º</li>            <li role="separator" class="divider"></li>            <li><a href="#">78mm</a> </li>            <li><a href="#">118mm</a> </li>            <li><a href="#">138mm</a> </li>            <li role="separator" class="divider"></li>            <li> 180º</li>            <li role="separator" class="divider"></li>            <li><a href="#">118mm </a> </li>          </ul>        </li>
        <li><a href="#">G24</a> </li>
        <li class="dropdown">          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">2G11 <span class="caret"></span></a>          <ul class="dropdown-menu">            <li><a href="#">10W</a> </li>            <li><a href="#">32W</a> </li>          </ul>        </li>
        <li class="dropdown">          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">SPOT <span class="caret"></span></a>          <ul class="dropdown-menu">            <li><a href="#">Redondo</a> </li>            <li><a href="#">Quadrado</a> </li>          </ul>        </li>
        <li class="dropdown">          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">DOWNLIGHTS <span class="caret"></span></a>          <ul class="dropdown-menu">            <li><a href="#">15W</a> </li>            <li><a href="#">30W</a> </li>          </ul>        </li>
        <li class="dropdown">          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">PLAFON         <span class="caret"></span></a>          <ul class="dropdown-menu">            <li><a href="#">Redondo</a> </li>            <li><a href="#">Oval</a> </li>          </ul>        </li>
      </ul>    </div>    <!-- /.navbar-collapse -->  </div>  <!-- /.container-fluid --></nav>

Bootstrap Responsive Navbar is showing but collapsed at any resolution in IE8

For media query support in IE8 you need to use Respond.js which will allow media queries to work.

Repo: https://github.com/scottjehl/Respond

---

Related Topics