[Resolved] Transparent Header Z-index

Home Forums Support [Resolved] Transparent Header Z-index

Home Forums Support Transparent Header Z-index

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1545968
    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.

    #1546418
    David
    Staff
    Customer Support

    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;
    }
    #1558083
    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.

    #1558202
    David
    Staff
    Customer Support

    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;
    }
    #1558298
    Ruben

    Hi David,

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

    #1558574
    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?

    #1558668
    David
    Staff
    Customer Support

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

    #1558726
    Ruben

    And that did the trick 🙂

    Thank you so much!

    #1560017
    David
    Staff
    Customer Support
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.