Nav disappears in IE browsers

Hi all

I have a demo page here to illustrate -

It’s a Wordpress page with a simple bbpress forum and a header with nav

I’m using bootstrap to make the page responsive.

When testing in VM’s in IE browsers the header and nav is completely broken.

The links don’t show and the red nav is twice the thickness.

If I test on a PC in IE9+ the nav dosen’t look broken at all.

My first question is should I trust the VM’s.

Can anyone tell me if the nav is broken in IE9+, I need IE8 but I’m sure that is broken

I know this is a long shot but if it is broken does anyone have any ideas why it is - it works perfect on all Mac browsers.

Hi, ttmt.

The page looks good in IE11, but not in IE8 (as you know).

Apparently, the VMs are not working properly, unless they are rendering in compatibility mode.
Try adding this meta tag to your page and see if that helps:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Aside: your local stylesheet should be the last stylesheet called from the HTML page. Looks to me like it’s the first. I advise moving it so it falls last.

Thanks for the feedback ronpat, I’ll try your suggestions and let you know how I get on

Thanks for the advice ronpat, the meta tag sorted most of the IE browser out but I’m still having problems with IE8, and I need it to work a bit at least.

I have a page her to illustrate, I’ve taken out the wordpress as I don’t think it’s relevant to the problem

It’s just a simple header with a nav.

I’m using Bootstrap to make it responsive, at smaller screen sizes the nav convert to a drop down menu.

I need it to work in IE8 but it’s not working

In IE8 menu dropdown button is always visble and the links are moved to the drop down menu.

You are linking t the respond.js twice. Once in the head and once in the footer. That may cause a conflict so remove the one from the footer.

Also respond.js doesn’t work with imported CSS files and also make sure the script is called after the css files in the html.