I am currently using Twitter Bootstrap 3 RC2 to create a navigation bar at the top of my page, which is working perfectly fine except on IE8.
In IE8, it seems like the browser is rendering the page as if it were on a smaller screen, causing the menu to collapse for mobile view. However, this is not the intended behavior.
While I understand that TB3 is still a work in progress, I would appreciate any solutions or suggestions from anyone who has encountered this issue before.
If you'd like to see the problem in IE8, please visit:
http://jsfiddle.net/DnwJN/embedded/result/
(Direct link is necessary as JSFiddle does not work properly in IE8)
Here is the link to the JSFiddle:
The navigation bar functions correctly in all other browsers including IE9, but not in IE8. It's worth noting that TB3 does officially support IE8 and above, having dropped support for IE7 and below.
If anyone has a solution to address this specific problem, your input would be greatly appreciated.
Code snippet from the fiddle
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="#">Title</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</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><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</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><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div></nav>