Docs

[SteveTurtle]

Hi there. I have a background video playing in the first section of my page. I am using Integrity theme with a transparent header that goes solid on scroll. On most browsers this displays correctly. However after first loading on Internet Explorer the header is white and there is a black section below it. After scrolling this disappears and the header is displayed correctly. How can I fix this? Thanks

[SteveTurtle]

This reply has been marked as private.

[Paul R]

Hi,

May I know which version of IE did you test your site.

Please note that on April 8, 2014 Microsoft officially stopped supporting Windows XP. At this point, we’ve dropped support for IE8 in X theme. This helps us stay up to date with the latest standards in web technology.

The oldest IE we support is version 9, this version and newer are available in Microsoft’s currently supported Operating Systems (Vista, 7, 8)

Continued use of XP after April 8, 2014 is an active security risk. We recommend you look into upgrading any XP machines you administrate, and advise your clients to upgrade. Microsoft explains this in detail here: http://www.microsoft.com/en-us/windows/enterprise/end-of-support.aspx

We’re sorry we can’t support IE8, but we’re certainly committed to making X the best it can be in today’s supported browsers and devices!

Thanks for understanding. Take care!

[SteveTurtle]

I understand that you no longer support IE. However this issue is also happening on Firefox and Microsoft Edge. Chrome and Safari are displaying correctly.

[Paul R]

Hi,

To fix it, you can add this under Custom > Edit Global CSS in the Customizer.

.home .x-navbar {
   position: absolute;
    top: 0;
    width: 100%;
}

.home.admin-bar  .x-navbar {
    top:32px;
}

Hope that helps.

[SteveTurtle]

Thank you, that worked perfectly

[SteveTurtle]

Sorry, I have just noticed that the navbar is no longer “Fixed Top” because of this CSS it is now “Static Top”. I need the navbar to always be displayed as you scroll down the page. Thanks

[Nabeel A]

Hi again,

Please replace previous code with this one:

.home .x-navbar {
    position: fixed !important;
    top: 0;
    width: 100%;
}

.home.admin-bar  .x-navbar {
    top:32px;
}

Let us know how this goes!

[SteveTurtle]

After adding that CSS the navbar on mobile is now floating slightly down the page after scrolling. It is displaying fine on all other browsers.

[Joao]

Hi there,

I turned off your Coming Soon Page(I re-activated your coming soon mode afterwards), so I was able to check on my mobile and I couldn’t notice any issue.

I only wouldn’t recommend you using a transparent mobile navbar, since you have texts on the hero image behind it is quite hard to read.

But nothing regarding the issue you mentioned. I also test it by re-size my browsers to a mobile size and no issues.

Thanks,

Please let us know if you are still experiencing the issue and need further help.

Joao

[SteveTurtle]

Yes you are right, the transparent navbar menu on mobile is not readable with the slider I am using.

Is it possible for the background of the mobile menu to change on click? So, the navbar is transparent after loading but when the navbar button is clicked the background of the navbar changes to black so the menu is readable.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

.x-nav-wrap.mobile {
    background-color: #000;
    padding: 10px;
}

Hope it helps.

[Author]

Posts