Filter button & grid toggle not clickable on mobile - Horizon theme

Technical Q&A
1

Problem:

On mobile, the Filter button and Grid toggle icons on collection pages are not clickable. Both buttons are visually present but unresponsive to clicks, only a tiny invisible area accepts clicks, making them unusable.
Store collection link:

What’s broken:

  • Filter button (three horizontal lines icon), not clickable on mobile
  • Grid layout toggle (square icons on the right), not clickable on mobile

Both buttons work fine on desktop.
Steps to reproduce:

  1. Open the collection page above on mobile (or mobile DevTools responsive mode)
  2. Try clicking the Filter button (left side of header)
  3. Try clicking the Grid toggle icons (right side of header)
  4. Buttons don’t respond

What I’ve already tried:

Disabled all app embeds
Removed custom CSS
Added CSS overrides with pointer-events: auto !important on .svg-wrapper, .button, .facets-toggle__button, etc.
Tested on multiple browsers/devices, issue persists

Theme:

Shopify Horizon

2

Because the title block is sitting on top of it with margin and padding. You can try to move it down the page a bit so they aren’t conflicting with each other or you do an easy fix by going to your theme settings, scroll down to Custom CSS and paste this:

.facets-toggle {
  z-index: 100;
}
3

I just added the z-index: 100; to

< div class="facets-toggle" style="
      --facets-inner-padding-block: 8px 8px; --facets-inner-padding-inline: var(--padding-lg);
      --facets-margin: 0px  0px 8px 0px; z-index: 100;
    ">

And it worked…

Edit: I see @Maximus3 beat me to it!