One problem one question | new Debut theme developement

Technical Q&A
1

I got a really strange problem with the new Debut. In a collection, I can’t “override” the z-index over the header. No matter what I do, the header ends up on top of everything. Exactly the same code on the product page will overlay. What am I missing? sticky-nav has z-index: 99 and my overlay has 999, still not on top.

I also wonder if anyone has a solution or could offer help to create a dropdown menu with variant colors, but with additional values. I need Image, Title, Availability.
I take it I have to code a false dropdown, but just don’t know how. So much js into the variant selection I just can’t get it to work.

2

Hi there,
Jack from OpenThinking here!

Try using !important like this:

.class { z-index: 9999!important; }

let me know if this works for your. If yes; accept my answer and give me thumbs up! Thank you.

3

No, nothing simple as that, but I figured it out 3am this morning. Will post it as my own solution as I also had problems with that setting for other type of behavior with new Debut when building the product detail page. Should have remembered that I had to disable that there. To tired I guess.

This is what destroys it.

@media only screen and (min-width: 750px)
.page-container {
    -ms-transform: translate3d(0, 0, 0);
    /* -webkit-transform: translate3d(0, 0, 0); */
    /* transform: translate3d(0, 0, 0); */
}