[Resolved] Transparent Header Z-index

[Ruben]

Hi there,

I have the content of my website merged with the header, so the header is always on top, with a transparent background.

On a few pages I pushed some interactive content behind the header:

https://www.lamirateca.com/beta/trabajos/

Those elements are now behind the header and I cannot reach them and click on them. I have been playing around with their z-index but nothing seems to work.

Is there any way to be able to reach and interact with an element behind the header and still have the header on top the rest of the content when I scroll?

Thank you.

[David]

Hi there,

an elements z-index is relative to its container, so z-indexing won’t work. You would have to move the entire page container in front of the header, which is no good.

Instead you will need to absolute position the filter buttons:

.jig-filterButtons {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translatex(-50%) !important;
}

#jig1 {
    margin-top: 100px !important;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ruben]

Hi David,

Thanks for this. It worked perfectly.

I have been trying to do the same in the store page (https://www.lamirateca.com/beta/shop-categoria/almacenaje/), to bring the woocommerce filter toggle in front of the header but I don’t seem to be targeting the right element:

.prodctfltr_wc {
    position: absolute !important;
    top: 50px;
    left: 50% ;
    transform: translatex(-50%) !important;
}

#wc-column-container ul{
    margin-top: 50px !important;
}

Any idea of what I am doing wrong?

Thank you.

[David]

The CSS class is incorrect. It should be: .prdctfltr_wc

However, you won’t be able to absolute position that element as it also contains the off canvas panel.

Instead you would need to target just its title element – something like this:

.prdctfltr_wc .prdctfltr_filter_title {
    position: absolute;
    z-index: 1000;
    top: -20px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ruben]

Hi David,

Thanks for the quick reply, but that code is not working for some reason.

[Ruben]

So after further trying when I add the code in the WordPress Customizer it doesn’t work, but if I add it in the Chrome browser style inspector it does work. Am I missing something?

[David]

Try adding the code to very top of your CSS Code.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ruben]

And that did the trick 🙂

Thank you so much!

[David]

Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts