Help! The margin-top of the predictive search result of my custom dawn theme increases when scrolled

Store Design
, , , , , ,

Topic summary

A developer is experiencing a layout issue with a customized Dawn theme’s predictive search functionality. The search modal is positioned below the header and designed to fill the remaining viewport height.

The Problem:

  • Before scrolling: predictive search results display correctly beneath the search bar
  • After scrolling (when announcement bar disappears): an unwanted gap/margin-top appears above the search results
  • Browser inspection reveals the search modal isn’t properly calculating the remaining viewport height

Visual Evidence:
Three screenshots demonstrate the inconsistent behavior before scrolling, after scrolling, and during inspection.

Current Status:
The issue remains unresolved. The developer is requesting code-level assistance to fix the dynamic margin/positioning problem that occurs when the page is scrolled.

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

Howdy guys! I am working on a custom dawn theme so far i’ve positioned the search modal to appear below the header and customised the predictive search to span and take up the remaining area but when i scroll to some point till the announcement bar disappears and then try to search something in the search bar the predictive search results appears slightly different ; a significant gap/margin-top appears, i have attached both of the behaviour

Also When i have inspected the page i can see that the search modal isn’t really taking the remaining vh below the search modal as you can see in the attached picture.

Before Scrolling:

Image 31-05-25 at 5.40 PM.jpeg
Image 31-05-25 at 5.40 PM.jpeg2880×1254 64.5 KB

After: Scrolling

Image 31-05-25 at 5.40 PM (1).jpeg
Image 31-05-25 at 5.40 PM (1).jpeg2880×1349 68.8 KB

When inspecting:

Image 31-05-25 at 8.20 PM.jpeg
Image 31-05-25 at 8.20 PM.jpeg2880×1390 286 KB

2

A help with the code will be amazing!