1

I'm using Jasny navbar off canvass (http://jasny.github.io/bootstrap/examples/navbar-offcanvas/) but I'm seeing an issue on IE 8 where the nav links are stacked on top of each other when the browser window is larger than 768px. Looks fine though if the browser window is smaller than that.

Screenshot of the issue: http://grab.by/z1Yu

Any help is appreciated!

Code Sample

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        body {
            padding-top: 50px;
            padding-bottom: 20px;
        }
    </style>
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link href="css/jasny-bootstrap.min.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" href="css/main.css">

    <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>
<body>
    <!--[if lt IE 7]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
 <!-- Static navbar -->
  <div class="navbar navbar-fixed-top navbar-default">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navbar-offcanvas" data-canvas="body" data-autohide="false">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="navbar-offcanvas offcanvas">
      <a class="navmenu-brand" href="#">Project name</a>
      <ul class="nav navbar-nav">
        <li><a href="../navmenu/">Slide in</a></li>
        <li><a href="../navmenu-push/">Push</a></li>
        <li><a href="../navmenu-reveal">Reveal</a></li>
        <li class="active"><a href="./">Off canvas navbar</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
  <div class="container">
    <h1>Hello, world!</h1>
    <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
    <p><a class="btn btn-primary btn-lg" role="button">Learn more &raquo;</a></p>
  </div>
</div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.js"><\/script>')</script>

    <script src="js/vendor/bootstrap.min.js"></script>
    <script src="js/vendor/jasny-bootstrap.min.js"></script>

</body>

Arnold Daniels
  • 16,516
  • 4
  • 53
  • 82
user2428993
  • 323
  • 1
  • 10
  • JSBin? Link? The only guess is that either you're missing respond.js (either the CDN is not working, the file is missing, or something), or your CSS is not a relative path (required for respond.js). – Christina Jul 30 '14 at 15:49
  • Thanks, BootstrapThemer. I added my markup above. I used initializr as my boilerplate. I see the same issue when I preivew http://jasny.github.io/bootstrap/examples/navbar-offcanvas/ in IE8. – user2428993 Jul 30 '14 at 16:04
  • It's an open issue: https://github.com/jasny/bootstrap/issues/185 – Christina Jul 30 '14 at 17:51
  • Thanks, BootstrapThemer! Hopefully there will be an update soon. – user2428993 Jul 30 '14 at 18:07
  • Was this issue ever solved as I am still experiencing issues with the off canvas example in IE8 - it all slides to the right? – tonyf Nov 21 '14 at 00:47

0 Answers0