Solved

One problem one question | new Debut theme developement

LostPer
Shopify Partner
42 2 8

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. 

Accepted Solution (1)
LostPer
Shopify Partner
42 2 8

This is an accepted solution.

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); */
}

 

 

View solution in original post

Replies 2 (2)

OpenThinking
Shopify Partner
321 81 120

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.

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]
LostPer
Shopify Partner
42 2 8

This is an accepted solution.

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); */
}