Logo and header menu display issues in IE

Support
#1

Hi, our site uses X Pro and since the upgrade to Pro we have noticed the menu and logo do not appear correctly in IE. Please take a look at the site and advise what we can do to fix this? Currently, users are unable to navigate their way through our site.

Thanks

#2

Hi,

To fix it, you can add this in X > Launch > Options > CSS

.x-image img { 
   max-width:280px;
}

.hm5.x-menu > li > .x-anchor, .hm11.x-menu > li > .x-anchor {
    flex-direction: row;
}

Hope that helps

#3

Hi, it’s fixed on all other browsers but still same in IE - Logo is not aligned and the links don’t work.

#4

Hi there,

Would you mind providing screenshots? It looks the same in my chrome and IE. Please clear your IE’s cache too.

Thanks!

#5

Becomes an issue as the screen size reduces to a hamburger menu and the FN logo…which is blown (see pic 2).
The other problem is on the side menu in full screen – go to any other page, collections etc. and you will see this (pic 1)…the logo is blown out, FN logo random position and none of the site links work.

#6

#7

Hi again,

Upon checking your site I see you’re using an old version of Pro, please update your theme first to the latest version. You can find the latest version numbers here: (http://theme.co/changelog/) Then you can compare them to what’s installed on your site.

If you find anything to be out of date, you can review our update guide.

Let us know if the issue persists.

#8

OK, I downloaded the theme from my dashboard, this is what shows in the admin:

Pro - UpdatedVersion: 1.1.1

But still same problem. I’d appreciate if someone could login and take a look please? How can I share admin details?

#9

Hi there,

That’s weird, the max-width: 40px is being ignored in specific browser width. Then I toggle on and off the styling in IE’s developer tool, it fixes itself. But the issue goes back once the page is reloaded. Looks like this is a visual glitch as there is a delay in image resizing( percentage width ) than resizing the browser, could you try jpeg image instead of PNG?

For the meantime, please add this CSS to your global custom CSS.

.hm9.x-image {
display: inline-block;
width: 100%;
}
.hm4.x-image {
width: 40px;
}

Thanks.

#10

Hi, I added the code as you suggested but my client still sees issues with Chrome and IE:

The main logo (Fibre Naturelle) seems to size ok, but the FN is floating at the side – see screenshots below.

More importantly though is that none of the menu site links work – they are just dead text.

  1. On Explorer – FN out of position & site links not responding.
  2. On Chrome – FN in correct position links working properly.

#11

Hi there,

You’re right, and changing the setting isn’t doing anything. Maybe the issue is its vertical size, could you try adding your elements within one single column instead of one container for each element.

Then change that container’s column flex layout to row.

This means the vertical space will be allocated directly to those elements instead if containers where flex has auto/100%.

Thanks!