Hello.

 

I am using the Bootstrap framework to design my site. I have the drop down working in the navigation, but from some unknown reason in IE8 the dropdown does not work. When you click on the About Us link, the drop down does not fully appear. This only happens in IE8.

 

It works fine in other browsers.

 

You can view it here:

 

https://dl.dropboxusercontent.com/u/52725754/fightback-responsive/index.html

 

Can anyone help with this problem?

 

Thanks

Hi, may be you need to add ;

$('.dropdown-toggle').dropdown()

$('.dropdown-toggle').dropdown();

Thanks for your reply. That line of code is already added to the bottom of my html file.

<script src="javascripts/bootstrap.js"></script>
        <script type="text/javascript">
        $('.dropdown-toggle').dropdown();
        </script>

I have placed it just above the closing body tag. It was in IE7, but not IE8 which seems strange.

hey mate,

 

your menu is working, but only 'onClick'. Here is a script that i use on my bootstrap websites so that is shows on hover

 

jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});

 

change .delay(200) to change the delay before it opens.

You may need to change jQuery to $

Thanks for your reply.

 

The code that you have supplied now makes the drop down work on hover which is great, but the problem with IE8 still exists.

 

I have attached an image to show the problem:

 

As you can see in IE8 the dropdown is hidden, but in the other browers it works fine.

 

The page can be viewed here: https://dl.dropboxusercontent.com/u/52725754/fightback-responsive-site/contact-us.html

 

Thanks

You've got a few errors coming through on Chrome (menu also doesn't work):

 

Invalid 'X-Frame-Options' header encountered when loading 'https://maps.google.co.uk/maps?hl=en&q=gmac+birmingham&safe=off&ie=UTF8&hq=…28&ll=52.53147,-1.910419&spn=0.026107,0.16119&z=13&iwloc=near&output=embed': 'ALLOWALL' is not a recognized directive. The header will be ignored. about:blank:1
2
Unsafe JavaScript attempt to access frame with URL https://dl.dropboxusercontent.com/u/52725754/fightback-responsive-site/contact-us.html# from frame with URL https://maps.google.co.uk/maps?hl=en&q=gmac+birmingham&safe=off&ie=UTF8&hq=…28&ll=52.53147,-1.910419&spn=0.026107,0.16119&z=13&iwloc=near&output=embed. Domains, protocols and ports must match.
 %7Bmain,mod_util,mod_act,mod_act_s,mod_actbr,mod_appiw,mod_mg,mod_mssvt,mod_pphover,mod_rst,mod_strr%7D.js:2145
Uncaught TypeError: undefined is not a function bootstrap.js:29
Uncaught ReferenceError: $ is not defined contact-us.html:126

 

You may need to change 'jQuery' to '$' as webcanvasdesign said above.

 

$('.dropdown-toggle').dropdown();
$(".collapse").collapse()
        
$('ul.nav li.dropdown').hover(function() {
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
   $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});
        

Thanks for your reply. I'm not sure what those errors are. I think it might be the embedded google map.

 

The nav is working fine for me on Chrome too. The only browser that is giving me problems is IE8.

 

I have updated the javascript to use $ instead of jquery now, but it still is not working in IE8.

 

Thanks once again.

Try wrapping your function in a document ready:

 

<script type="text/javascript">
$(document).ready(function() {
   $('.dropdown-toggle').dropdown();
});
</script>

 

It's not working in Chrome for me (version 26.0.1410.64)

 

I'm getting these errors:

 

Uncaught TypeError: undefined is not a function bootstrap.js:29
Uncaught ReferenceError: $ is not defined 

Thanks for your reply.

 

You were right about the nav not working in Chrome. I had it working because I was looking at my local machine. It should work now in Chrome. The jquery was pointing to http:// when it should have been https://.

 

https://dl.dropboxusercontent.com/u/52725754/fightback-responsive-site/contact-us.html

 

I will try your suggestion later.

 

Thanks

Hi

Do you still have the same problem? If not, can you share the solution with us? because I'm having the same problem on a site ( http://huis1.homethoge.be )

But if you didn't, I've found already a little that can maybe help to find a solution:
- the dropdown only appears within the box of the navigation, so when you change the height of the navigation to 200 px, you will see that the dropdown will be displayed. But then the navbar is offcourse too big.