Possible header issues after pro theme 2.5.3 update

Hi,

Since the update to 2.5.3 we inspected two issues we have never encountered before with our site’s header.

Summary

https://lumenis.com/solutions/surgical/holmium-products/lumenis-moses-pulse-120h

Summary

https://lumenis.com/solutions/aesthetic/products/legend-pro/

Is it possible that the latest 2.5.3 pro theme update affected design/CSS/layout of the headers in any way?
If so, how can we fix it?

Thanks!

Hello Amir,

Thank you for the very detailed post information. I have check both the pages mentioned in your post inquiry. I am not seeing any issues at all. Most probably, you were having some caching issue.

After doing the updates, always remember to clear all caches (only if you are using WP Rocket, WP SuperCache or W3 Total Cache) when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

And please clear your browser cache too. You may use private browsing mode in testing your site to make sure that you are viewing the latest codes from the updates and not the cached version in your browser.

Please let us know how it goes.

Guys I have similar problems on my site, since the updates.
Even opened a thread for it.

Hello @Ravi,

Thanks for updating this thread. At this time we kindly ask that you open up your issue in a separate thread along with your site url and login credentials in a secure note. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Best Regards.

I cleared the site’s cache, browser cache, and the server cache several times. On our end, it is still not displayed correctly.

Google Chrome Version 73.0.3683.75
Windows 10 Version 10.0.17134 Build 17134
Screen Resolution 1920*1080

Can you please also refer to my question from the original post?

Hello Amir,

I have checked your site again and I could not replicate the issue. I am using the latest Google Chrome with a screen resolution of 1920x1200.

Please use private browsing mode or Chrome’s Incognito mode and test your site again.

The problem appears on my end and on other devices I checked.
Please verify it again, it seems to be related to a chrome update to Version 73.0.3683.75

Please confirm that your Chrome is up to date.
This is business critical to us - would appreciate your immediate support.

Edit - Please see these links, they may be helpful for you to understand the issue.


https://bugs.chromium.org/p/chromium/issues/detail?id=927066
https://bugs.chromium.org/p/chromium/issues/detail?id=927066#c77

I followed online instructions for a workaround which suggested to add the following css to the affected flex containers. It fixes the issue but please solve this problem asap so we could remove this workaround.
$el {
min-height: 0
}

You can inspect affected site at:

Summary

https://journey1.lumenis-staging.com/aesthetic/

Summary

https://journey1.lumenis-staging.com/surgical/

Summary

https://journey1.lumenis-staging.com/ophthalmology/

Thanks,
Amir.

Hi Amir,

Could you try this setting?

For header bar

For first container of that header bar

This create a header with both containers align on top and bottom (hence, space in between). The text will be placed top-most, while the menu on the very bottom. But we want to make the text align to the center, in that case, split the container in half (50%), and since it’s align to End (container), the text will then align to the bottom of 50% which will then appear as if it’s vertically center.

Your current header and container settings are different.

Thanks!

Thank you Rad, we implemented the settings you’ve specified - It had some effect but unfurtunately this hasn’t solved the issue.

Summary

https://journey2.lumenis-staging.com/ophthalmology/

Hello Amir,

​To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation.

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thank you.

Added secured note

Hello Amir,

I have logged in and I edited your header. I increase the header height to 16em and tweak the settings of each containers.

Please check your site now.

Thanks RuelNel,
I checked the site and this is much better now, but the header is not in its full height now.
See the site you edited compared to the live site below.

[details=Summary]
https://lumenis.com/ophthalmology/[/details]

Summary

https://journey2.lumenis-staging.com/ophthalmology/

Hello Amir,

The header in the live site is 300 pixels. The staging site is only 16em.
It just need to be edited and changed the values. I went ahead and changed it already.

Please check it now.

Thanks RuelNel!
It looks good on Chrome, FF and Edge.
On IE11 the blue menu is not aligned with the container, we already have a handful of issues on IE11 with the theme, I don’t want to add another one to our basket. Do you think there is a solution for that which won’t regress other browsers?

Thanks!

Hi Amir,

It seems to be okay on my IE, thanks!

The problem with older browsers is the lack of features that other modern browsers have. Given that it’s old then there is no way to predict what will be the outcome if those new features or styling are implemented on IE. And sometimes, even if you have the same settings and configuration from multiple sites, they may appear differently from each other on IE. It will be a trial and error to get it fixed.

Thanks!

Not sure, about your build, but I tested on a different device and it is also not aligned in IE11.
The customized workaround of adding min-height: 0 to the containers doesn’t regress on any browser I checked - but it is more reliable to use the theme’s configuration to fix the problem, so I really want to get it to work natively in the theme.
Is this whole issue is going to be addressed in a theme update?

Hi Amir,

I can’t confirm the issue on my installation as well, and all theses issues are configuration related in which can be fixed through the settings. And should work with the correct setting. Though, if it’s IE build related then we’ll have to investigate it further as we can’t add fixes for something we can’t reproduce or else, it will just contribute more issues. Setting minimum height is the same as setting the height, and the header bar have height setting where you can implement it.

I’ll continue checking to see if I can reproduce this.

Thanks!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.