[Resolved] Links not working in Page Headers

[Paul]

Just noticed a weird problem and can’t figure out why its happening. Links in Page Headers aren’t working. The anchor text can be selected, but they can’t be clicked. I’ve never run into this before. I tried replicating across a couple different page headers on the site with no luck.

[Tom]

It’s being caused by this custom CSS:

#page-header-5422, 
.generate-page-header {
    z-index: -1;
}

[Paul]

Oh crud! That comma after 5422 is what messed me up. That’s not supposed to be there. Now I see why it’s affecting all page headers now. I quickly confirmed my mistake when I looked at my blog page’s header (has ID 5586) and went “that’s not the same ID as the one Tom mentioned”. Then it clicked. Duh. Sorry to bug you over something so silly.

[Tom]

No worries! Glad I could help 🙂

[Andrew]

Hi, I’m having a similar issue and z-index: -1 is the offending line.

I’ve used the Mellow template from Site Library and I’ve also followed the guide here: https://docs.generatepress.com/article/page-hero-background-video/ to add a video background. The #page, which should overlap the page-hero, was still underneath and the only thing that seemed to affect this was adding z-index: -1 to the page-hero.

Making it z-index:1 and the #page z-index:2 does nothing and I don’t know why! Help!?

Test site here: https://healthy-weight.co.uk/research/

[David]

Hi there,

in Customizer > Additional CSS – find this and remove the z-index: -1;

.page-hero {
    position: relative;
    overflow: hidden;
    z-index: -1; /* remove this */
}

Then add this CSS:

.page-hero+#page {
    position: relative;
}

[Andrew]

Thanks David, always something simple that eludes me.

[David]

You’re welcome – i think we’ll update the Site in the library

[Author]

Posts