Pro Headers - Layout & Scrollbar | Internet Explorer and the Navigation Collapse

Support
#1

I am working on a website and I love the new Pro headers and Footers but I have run into some problems I need help on.

  1. For the layout I would like my header to appear as in the below screenshot:

    Right now everything stacks one on top of the other, but I would like some of the elements to remain at the bottom of the page.

  2. When the screen is shorter I can see the elements trying to float at the bottom and they overlay the other elements, my navigation starts overlaying the logo, and the social icons/search bar overlays the navigation. I would like these elements to display normally without the extra space around them (so how they are now) with just the scroll bar so you can access all of it even if the screen is smaller. Should I just put everything in the same container so I don’t have the overlaying problem?

  3. The header is not working well at all in Internet Explorer. I do not want the first tabs to go to pages (ex. “Why Use…”). They are simply there for links to show the drop-downs. From my understanding that is exactly how the Navigation Collapse is supposed to work. It works great in Firefox and Chrome, but when I open the page in Internet Explorer, my layout differs quite a bit. The navigation section is centered rather than appearing right under the logo, the navigation text is centered rather aligning left, the arrow icons to signify the drop-downs are being cutoff and are not aligned to the right correctly, and most importantly when you click the top navigation is goes to a page rather than showing the dropdown. I tried removing the page link for the “What is…” page to see if that would resolve the problem, but when you click it just doesn’t go anywhere at all now.

Let me know if you need any further details, I would have added more screenshots, but since I am a new user I can’t. Hope you can help!

#2

Hi there,

I changed the message and moved the password using the Secure Note button. The way you added the password was public. But the secure note is private.

Regarding the problem, I suggest that you avoid using the auto settings for the Flex Basis option. Instead, use the 100% to avoid problems with IE 11 not rendering stuff correctly.

Also for the social media on short height devices, I suggest that you use the Align Self option to set it to flex-end.

For further assistance, we will need to have an access to your WordPress dashboard.

Thank you.

#3

Hello, number 1 and 2 are fixed with your suggestions, thank you! I have some tweaking to do, but it is good for now.

  1. Changing the flex and such away from auto did not help the IE problem, so I switched it back to auto, since the percentages were not working for my desired layout in the other browsers. There is a large gap between my logo and navigation that doesn’t go away when the window gets resized. My text is not aligning left for my menu in IE either for some reason.

My Navigation Collapse is not working in IE, either for my mobile header or desktop. The top menu items were linking to the pages that I had them set as in my Wordpress menu, but I removed those links and made them go nowhere with a custom link menu item, and it continues to not work.

I can create a user for you so you can access the backend, please just let me know what email you would like that made for.

Thank you.

#4

Hi there,

Kindly add the username and password with any email you like for us. Unfortunately, we can not check the email itself so you will need to add the username, check it in the email and then give us the username/password with the URL of the Wordpress Dashboard login page.

Unfortunately, we can not be of a help unless we check the settings and see the result in IE 11 to be able to suggest the best options combination.

Thank you for your understanding.

#5

Thank you, see the username and password.

#6

Hi there,

The credentials are incorrect. But I do notice that the javascript responsible for collapse and hover is not being triggered. This is more related to javascript than styling. Example,

When a link is lick, this attribute data-x-collapse="closed" should change to data-x-collapse="opening" and so on. And the x-interactive is not being triggered.

Plus, my IE11 freezes and crash when I let it open for too long (while troubleshooting) and it’s one of the results of faulty javascript. Please provide your latest login credentials.

Thanks.

#7

I updated the secure note above for the latest login information.

#8

Hi There,

Regarding the space, try adding

.hm14.x-image img {
     max-height: 122px !important;
}

It seems that on IE, when the image is adjusted since the logo is large than what needed, the height doesn’t adjust automatically.

Can you clarify which link exactly is not working on IE? See this:https://screencast-o-matic.com/watch/cbjfj4lkZ3
The links are working.

#9

Adding the code did fix the logo spacing.

I am not sure if someone logged in to our Wordpress, but the text is now left align on the desktop view for IE which is good, though it is not on the mobile version in IE.

In the screencast you actually show it not working correctly, because I am using a navigation collapse. When you click it is suppose to show other menu options, not just go to the the top menu page. I had deleted the pages that were just placeholders to see if that helped, but as you can see when you click “Projects” it goes no where. Yes the top menu links that do go to pages go somewhere (Out Company and Contact), but that is not how the navigation collapse is suppose to work, and if you would have tried clicking through all of them you would have noticed that “What is…”, “Why Use”, & “Projects” does not work. “General Specifications” doesn’t have any sub menu items so it is working as well. The collapse is what is not working in IE 11.

Thank you.

#10

Hi There,

Sorry I misunderstood the issue regarding IE. I can see it now the submenu indicator icon is missing thus submenu links is not accessible. To show it, please select Top Links then set CONTENT FLEX LAYOUT > Horizontal
Although, we still found a bug here. The settings will show the submenu indicator but there’s an error on IE that was forwarded to our developer already. We’re sorry for the inconvenience this has caused you. We will let you know once we have an update. Thank you for understanding.

Regarding left align, I did not change anything on your site. Usually in case we update, we will let you know what we do. Can you give us screenshot on the issue regarding mobile version of IE?

#11

You can see the centering error from the mobile size on IE here:

Should I switch my header to something else until this error is fixed? I need my customers to be able to access the sub menu pages.

The bug you are referring to is that the navigation collapse does not work in IE correct?

#12

Hi There,

This is what I am seeing at the moment:

Yes, it’s a bug on navigation collapse submenu. You may switch to other types of element at the moment.

#13

Hey there,

I played around with the flex settings, and it helped with the alignment.

Is there an estimated time when the bug might be fixed? When you roll out updates I imagine if it’s fixed that will be mentioned in the change-log, so I will know.

Right now everyone really likes how the navigation works, but of course I need a working solution for IE. I figure I will just make landing pages, since it goes to whatever the top level link is when you click it, and have those pages have links to the sub menu items.

I was wondering if there is a way to make it where certain elements only appear in IE browsers, so maybe some kind of IF statement that when opened in IE it hides the navigation collapse and shows a different menu item. I don’t know if this would be possible with your theme and using the new headers options.

Thanks!

#14

Hi There,

Unfortunately, we can’t promised an ETA for the bug fixed. Yes, we do add all bug fixed information on our changelog. All elements is across browsers. There’s no option to hide it per browser. That might be possible with customization that is outside the scope of our support. We’re really sorry for the inconvenience this has caused you. Rest assured that our developers are really working on it.