Why is my predictive search displaying under the free shipping bar?

Store Design
, , , ,

Topic summary

Predictive search dropdown appears beneath a custom free shipping bar on a modified Dawn theme. Both elements use z-index: 3, but changing the predictive search’s z-index (to 4, 2, or 1) has no effect.

Behavior occurs only after scrolling when the header shrinks; the bar becomes fixed in that state. With the bar set to z-index: 2, the search shows above it, but then product images overlap the bar, which is unacceptable.

A suggested fix involved adding code in theme.liquid, effectively placing the bar below the search (confirmed via screenshot). The store owner rejected this because it doesn’t preserve the bar above product images.

Key detail: z-index controls stacking order in CSS, but observed behavior suggests other constraints are influencing stacking. The thread remains unresolved; the desired outcome is raising the predictive search above the bar without lowering the bar’s stacking relative to product images.

Summarized with AI on January 9. AI used: gpt-5.
1

I’m using a modification of the latest version of Dawn. I created a simple free shipping bar that sits below the header but above the main content. It is set with a z-index of 3, because product images were displaying over it when scrolling. So far so good.

My predictive search drop-down is displaying under the new free shipping bar, like this.

Screenshot 2024-01-01 at 12.15.22 AM.png
Screenshot 2024-01-01 at 12.15.22 AM.png2170×906 173 KB

It, too, has a z-index of 3, so I figured if I changed that to a 4, that would resolve the problem. But it doesn’t. I tried dropping it, too, to a 2 and then a 1, but it never changed its position relative to the other elements. Changing the z-index on the predictive search does nothing. Clearly, something else is setting where it is on the z-axis.

If I change the free shipping bar to z-index: 2, it does drop under the predictive search, so, relatively speaking, the search does appear to have a z-index: 3.

It’s probably something simple, but I’m stumped. This is on our live site already, but it only happens when you scroll up and the header shrinks. The free shipping bar is static when the header is full, but becomes fixed based on the height of the header when it shrinks. Not sure if that has anything to do with it.

Thanks!

RepurposedOnline.com

2

Hey @Dascalargo

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1704089030921.png
Moeed_0-1704089030921.png1914×881 207 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Thanks, Moeed, but that’s not the solution. As said, if the free shipping bar is a z-index: 2, the product images are over it. The solution isn’t having the free shipping bar lower on the z-axis; I need to have the search higher.