Hueman Theme Top Menu Bar Problems with Internet Explorer

Hi rebekahpaul. I don’t see that issue on either a test site that I run or on a default installation of Hueman. Might be a plugin conflict?

I was told by someone they were seeing it, then when I tested it here I’m seeing it also.

https://www.browserling.com/browse/ie/9/http%3A%2F%2Fwww.digitalhive.buzz

Yes, I can see it also on my local computer using IE11. However, using IE11, I don’t see that issue on my test site using Hueman or on a site that has a fresh install of the Hueman theme. I’m wondering if maybe one of your plugins is somehow causing a conflict with the theme in IE.

How would I know if that’s the case? There isn’t any plug-in that I’m not using. Would it help to give a list?

Akismet
Category Order and Taxonomy Terms Order
Code Embed
Content Views
HTML Javascript Adder
HubSpot for WordPress
ImageMapper
Print Friendly and PDF
Simple Link List Widget
WP Backitup

A plugin conflict is one possibility; there may be others. One way to determine if there is a plugin conflict is to disable them all and see if the problem is fixed. If it is, then re-enable them one-by-one, checking to see if the problem occurs again. If it does, then that plugin is probably causing the issue.

I don’t suppose the author of the theme might be able to make a fix? One of the plug-ins, Content Views, drives my page setup on a couple of pages. I really don’t have another option to layout my page in the same way, if that is the problem.

After some research it appears that the issue is related to the way IE is handling the style sheets. For some reason it is giving a higher priority to the bootstrap.min.css styles even though the theme css files are loaded later. The other browsers appear to respect the load order. Two things in particular that are causing the problem; images here.

That is awesome that you figured that out! However, I’m not astute enough to know how to fix it. I’m sorry, is there any instructions available?

We can try to override the bootstrap styles by using the !important rule. Add this to your custom css and see if it fixes the issue:

/* override the bootstrap.min.css styles being applied by IE */
.nav > li {
  display: inline-block !important;
  }
.nav > li > a {
  padding: 15px 14px !important;
  }

That did seem to fix it, I tested it here if you care to take a look:

https://www.browserling.com/browse/ie/9/http%3A%2F%2Fwww.digitalhive.buzz

Let me know if you find differently.

Thank you so much!
Rebekah

Just checked it in IE11; looks good. Glad I could help. If you don’t need any further assistance here please mark this topic as resolved. Thanks.

Hi bdbrown

I’m facing same issue with my website https://catchwits.com/ it is working fine on Chrome and firefox, however it is loading terribly on IE ??

If i include above code in child theme will that work if not where do i need to include mentioned code

Thanks in advance

Regards
Aniket

@aniked_d – I just checked your site in Chrome, FF and IE 11. I didn’t see any problems in IE.

EDIT: It’s fixed now. Thanks for your instructions!

Hi bdbrown,

My site is having the same issue  with internet explorer with the same hueman theme. I added following code you gave to the custom.css but menu is still stacked on internet explorer. <a href="https://tasutakasiino.com">https://tasutakasiino.com</a>

/* override the bootstrap.min.css styles being applied by IE */
.nav > li {
display: inline-block !important;
}
.nav > li > a {
padding: 15px 14px !important;
}
`

@cedarteeth – I don’t see anything out of the ordinary on your site on Chrome, FF or IE. The menu goes to two lines as the viewport narrows in mobile view, until the menu collapses at 720px. This is normal functionality. If you’re seeing something else please let me know.