Display Difference in Chrome

Support
#1

Hello X-Team,

http://cpap.bluetroop.com/about-us/

Please view this page in Chrome and see my attached screen capture comparison. The page will display fine in Explorer, Firefox and Edge but in Chrome below the navigation bar, the section below with the tagline is overlapped. How can I correct this browser issue? Please advise.

#2

Hi There,

Thank you for writing in, the issue is not on Chrome but on your navbar height. Please navigate to X > Launch > Theme Options > Header and increase the NAVBAR TOP HEIGHT accordingly until you see the first section not being overlapped by the header.

You can upload your screenshot here (https://prnt.sc/) and provide us the link.

Cheers!

#3

Hi,

I added this bit of global CSS:

.x-navbar{
height:120px;
}

and it seemed to help the appearance in Chrome, but is still overlapping in Safari. You can see here if you bring this page up in that browser:
http://cpap.bluetroop.com/product/airfit-f20-full-face-mask-replacement-headgear/

What other CSS adjustments can I make to correct the problem?
Thanks.

#4

Hi again,

Please replace your CSS with the following code:

.x-navbar, body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto !important;
}

Cheers!

#5

Excellent. Works perfectly, thank you.

1 Like
#6

Glad we could help.

Cheers!