Dawn theme search tab troubleshooting

Store Design
, , , , , , , , , , , , ,

Topic summary

A user is experiencing an issue with the Dawn theme’s search bar where the background content scrolls while viewing search results. They want the search results to remain sticky, preventing the background from scrolling during navigation.

Proposed Solutions:

  • One responder suggested adding JavaScript code to the predictive-search.js file:
    • Lock scroll in the open() method using document.body.style.overflow = 'hidden'
    • Unlock scroll in the close() method by resetting the overflow property
  • Another suggested adding custom CSS: body.overflow-hidden { overflow: hidden !important; }

Current Status:

  • The issue appears inconsistent—background scrolling doesn’t occur when many results are shown (e.g., searching “denim”), but does occur with fewer results (e.g., “tees” or “shirts”)
  • The discussion remains open with multiple potential solutions offered but no confirmed resolution
  • Implementation requires modifying theme code files (JavaScript and/or CSS)
Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

I’m using the Dawn theme for my website and need help troubleshooting an issue with the search bar. When searching for a term (e.g., ‘denim’) and then scrolling through the results, the background also scrolls. I’d like the search results to be sticky, so the background doesn’t scroll.

Specifically, when scrolling down or up, the user experiences a glitch. Can someone assist me in resolving this issue?

website: https://the-rugged.com/

password: rugged

Thanks in advance.

2

Hi @Sivadarshan

I see it’s sticky now, how do you want other?

BiDealDiscount_0-1748873389451.png
BiDealDiscount_0-1748873389451.png1824×962 169 KB

3

Hi @Sivadarshan ,

Use the below codes in the open and close method of predictive-search.js :-

Inside open() method (LOCK SCROLL) use this code :

open()

{
this.classList.add(‘predictive-search–open’);

document.body.style.overflow = ‘hidden’;
document.body.style.height = ‘100vh’;
}

Inside close() method (UNLOCK SCROLL) use this code :

close()

{
this.classList.remove(‘predictive-search–open’);

document.body.style.overflow = ‘’;
document.body.style.height = ‘’;
}

Please let me know if this works for you .

Thanks!

4

@BiDeal-Discount In background the products are scrolling all the way, I don’t want that things to be scrolled

5

I think I got your point, Let try to add this custom css :

body.overflow-hidden {
  overflow: hidden !important;
}
6

To get this done, you will need to modify the theme code, if you are an expert in that, it will be easily done

7

Hi @Sivadarshan ,

When there are more options available in denim, the background does not scroll. However, when searching for other products like tees, shirts, and others, it seems to work fine.

Please let us know how you would like it to function.

Thank you!