Moving search bar below sticky bar on mobile

Store Design
1

How can we move the search bar below the header on mobile for Focal theme?

current theme

Screenshot 2025-05-13 at 9.30.09 AM.png

example

Screenshot 2025-05-13 at 9.30.50 AM.png

2

Hi @r_atp29 , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

3

Hello @r_atp29 To move the search bar below the sticky header on mobile in the Focal theme (by Maestrooo), you’ll need to modify the Liquid and/or CSS logic that controls how and where the search drawer appears.

Goal
Make the search bar open under the sticky header instead of overlapping it.

Steps to Move Search Below Sticky Header on Mobile

  1. Identify the Sticky Header
    In the Focal theme, the header is typically sticky using CSS like this:
.header {
  position: sticky;
  top: 0;
  z-index: 10; /* or higher */
}
  1. Find the Search Drawer Code
    Look in:

. header.liquid or header-group.liquid

. Or check search-drawer.liquid or component-search-drawer.liquid

You’ll likely see a block like:

This drawer is positioned absolutely or fixed, making it appear over the header.

  1. Edit the Drawer Positioning
    Option A: Use position: absolute below header
    Update CSS for .search-drawer like this:
@media screen and (max-width: 749px) {
  .search-drawer {
    position: absolute;
    top: 100%;
    z-index: 9;
  }

  .header--sticky + .search-drawer {
    top: calc(var(--header-height)); /* if header has a height variable */
  }
}

Option B: Wrap Search Drawer Outside Header
If the search drawer is inside the , move it outside the sticky header element in the DOM structure.

. Open header.liquid

. Find the search drawer include like:

{% render 'search-drawer' %}

. Cut it from inside the header

. Paste it just after the closing

Example:


{% render 'search-drawer' %}
  1. Tweak Z-Index if Needed
    You may need to set:
.header {
  z-index: 20;
}
.search-drawer {
  z-index: 10;
}

Final Touch (Optional)
If the drawer has a background and covers content below, add:

.search-drawer {
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

Thank you :blush: