Transparent Header Z-index

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;
}

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.

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;
}

Hi David,

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

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?

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

And that did the trick :)

Thank you so much!

Glad to be of help