Issue with my header - search icon

Store Design

Topic summary

A user is experiencing a header overlap issue where clicking the search button causes the header menu to remain visible, blocking the search functionality from working properly.

Troubleshooting attempts:

  • Initial CSS solution proposed: .search-popdown { z-index: 9999; }
  • This did not resolve the issue
  • Updated CSS solution provided: .header__desktop__button { z-index: 9; }

Current status:

  • The issue remains unresolved after the first attempt
  • A second CSS fix has been suggested but not yet confirmed as working
  • The problem appears to be a z-index layering conflict between the search popdown and header elements

The site in question is www.thebodyshop.ca, and a screenshot was provided showing the header layout.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hello

When i click my search button - the header menu still appears and therefore doesn’t allow for the search to be done

can anyone help?

TBS2023_0-1742193184137.png
TBS2023_0-1742193184137.png1411×250 9.32 KB

www.thebodyshop.ca

datsau

1 Like
2

Please add this code to solve it

.search-popdown { z-index: 9999; }
3

nop - not working :disappointed_face:

1 Like
4

Sorry, please update code to this

.header__desktop__button { z-index: 9; }
1 Like