Bootstrap navbar not visible in IE8 - css

Question

I know this question has been asked several times and i checked through all the possible solutions but none worked perfectly for me.
Here is my problem:
I am using bootstrap 3.2 and i have created a navbar working perfectly in chrome, firefox and latest IE but not in IE8,7. I tried adding the following files but it didnt help:
<!--[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]-->
Other than that, i tried adding: filter: none !important; and removed .collapse{display:none} But after playing with these things i got a menu in vertical position rather than horizontal. Here are the two images showing the dropdown menu Before and After the hacks i tried.
IE8
IE11
After removing .collapse{display:none}
Here is my code:
<div class="navbar navbar-inverse">
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"> <span class="glyphicon glyphicon-home"></span> </li>
<li class="dropdown">
Tipologie mandrini
<ul class="dropdown-menu">
<li> <span class="glyphicon glyphicon-pencil"></span> Inserersi nuovo modello</li>
<li> <span class="glyphicon glyphicon-search"></span> Ricerca</li>
<li> <span class="glyphicon glyphicon-list"></span> Visita</li>
</ul>
</li>
<li class="dropdown">
Singoli mandrini
<ul class="dropdown-menu">
<li> <span class="glyphicon glyphicon-pencil"></span> Inserersi nuovo mandrini</li>
<li> <span class="glyphicon glyphicon-search"></span> Ricerca</li>
<li> <span class="glyphicon glyphicon-list"></span> Visita</li>
</ul>
</li>
<li class="dropdown">
Macchine
<ul class="dropdown-menu">
<li> <span class="glyphicon glyphicon-pencil"></span> Inserersi nuovo macchina</li>
<li> <span class="glyphicon glyphicon-search"></span> Ricerca</li>
<li> <span class="glyphicon glyphicon-list"></span> Visita</li>
</ul>
</li>
<li class="dropdown">
Montaggio
<ul class="dropdown-menu">
<li> <span class="glyphicon glyphicon-pencil"></span> Inserersi nuovo montaggio</li>
<li> <span class="glyphicon glyphicon-search"></span> Ricerca</li>
<li> <span class="glyphicon glyphicon-list"></span> Visita</li>
</ul>
</li>
<li class="dropdown">
Smontaggio
<ul class="dropdown-menu">
<li> <span class="glyphicon glyphicon-pencil"></span> Inserersi nuovo Smontaggio</li>
<li> <span class="glyphicon glyphicon-search"></span> Ricerca</li>
<li> <span class="glyphicon glyphicon-list"></span> Visita</li>
</ul>
</li>
<li class="dropdown">
SKF SF riparazione
<ul class="dropdown-menu">
<li> <span class="glyphicon glyphicon-pencil"></span> Inserersi riparazione</li>
<li> <span class="glyphicon glyphicon-search"></span> Ricerca</li>
<li> <span class="glyphicon glyphicon-list"></span> Visita</li>
<li class="dropdown-submenu">
Ship
<ul class="dropdown-menu">
<li>Ship to Cassino</li>
</ul>
</li>
<li class="dropdown-submenu">
Accept
<ul class="dropdown-menu">
<li>Accept spindle(s)</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
Altro fornitore
<ul class="dropdown-menu">
<li> <span class="glyphicon glyphicon-pencil"></span> Inserersi altro fornitore</li>
<li> <span class="glyphicon glyphicon-search"></span> Ricerca</li>
<li> <span class="glyphicon glyphicon-list"></span> Visita</li>
</ul>
</li>
</ul>
</div>
</div>
NOTE: I am using YETI theme provided here: http://bootswatch.com/yeti/

Answer 1

I believe there is an answer to your problem over here: IE8 issue with Twitter Bootstrap 3.
It appears that respond.js only works for local files. The referenced stackoverflow article mentions tring your website on IE8 with a local copy of bootstrap.css. Hope this helps.