Error or bug on website - overlapping issue

Store Design

Topic summary

Main issue: On desktop, the search button opens a search overlay that visually overlaps the main menu in a messy way; mobile is unaffected. Screenshots were attached, and the store URL (www.bbam.com.au) was shared.

Proposed fixes: Add a CSS rule to increase the search modal’s stacking order (z-index) so it properly sits above other elements. Two variants were suggested:

  • .search-modal { z-index: 9999; }
  • details[open] > .search-modal { z-index: 9999; }

Guidance provided: Step-by-step instructions to edit the theme’s CSS file in Shopify:

  • Admin → Online store → Themes → Current theme → Actions → Edit code → Assets → base.css

Outcome: The user applied the CSS change and confirmed it resolved the overlapping issue.

Status: Resolved. No further actions required.

Notes: The fix addresses desktop display by controlling layer order (z-index). Screenshots helped illustrate the problem but are not necessary post-fix.

Summarized with AI on February 11. AI used: gpt-5.
1

Hey,

Could someone help me with this bug. I’m a newbie, I’ve designed my website myself using the shopify theme store etc..

I recently noticed this “bug”… this has only just started occurring in the last few days.

My main menu is working as normal, until I hit the search button (icon)… It shows over the top looking all messy. Before it was “blue” over the top of the menu with the search field.. (I’m no good at the correct lingo)

I’ve attached screenshots.

This seems to only happen on desktop and mobile doesn’t seem to be affected

any help would be amazing

Ben

2

Hi @bbam ,

Could you share your store URL and protected password if it has?

3

www.bbam.com.au

4

Hi @bbam ,

You can solve the issue by adding this css code at the bottom of you base.css file

.search-modal { z-index:9999; }
5

@bbam

Please add the following CSS code to your assets/base.css bottom of the file.

details[open]>.search-modal { z-index: 9999;}

Thanks!

6

Sorry, I actually have no idea what your talking about. I can’t & don’t code…

and I don’t wanna hahahaha, Is there another way to fix this?

7

Hi again, Can you please show me how to do this. I don’t understand coding etc.

I have done this website completely on the templates.

I’d appreciate it :slightly_smiling_face:

Ben

8

Go to your Shopify admin > Online store > Themes > Current theme > Actions > Edit code > Assets > base.css

9

What a LEGEND!! Thank you so much. It worked.

1 Like
10

You are welcome