Moving search bar below sticky bar on mobile

[r_atp29]

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

current theme

example

 

[websensepro]

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

[goldi07]

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 */
}

2. 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:

<div class="search-drawer" id="SearchDrawer">

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

3. 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 <header>, 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 </header>

Example:

</header>
{% render 'search-drawer' %}

4. 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 😊