Implementing Pagefind Search in Header with Distinctive Results Display

[eyallampel1]

Hello All,

I'm currently integrating the Pagefind search library into my website's header component and encountering a few challenges I hope to get some assistance with.

Issue Description:
When search results are generated, they expand the header component, disrupting the layout. My goal is to achieve a search experience similar to Algolia's, where activating the search dims the main content and presents the results in a distinct overlay.

Attempts and Challenges:

1. I've tried setting the search element to a higher z-index and using absolute positioning. This approach partially works, but I'm unable to change the background color of the search results to make them visible against the body's background.

2. I've experimented with JavaScript to detect clicks within the search element and dim the rest of the site. However, this hasn't been successful due to compatibility issues with the Astro framework, which doesn't favor heavy JS solutions.

Questions:

1. Is there a recommended way to set the search results to appear over the main content without altering the header's size?
2. How can I change the background color of only the search results container to ensure visibility over the main content?
3. Are there any examples or best practices for creating a pop-out search window effect within the Pagefind ecosystem, especially when working with static site generators like Astro?

Any guidance, examples, or pointers to documentation would be greatly appreciated. I'm looking for a solution that maintains the static nature of Pagefind while providing a seamless and intuitive search experience.

Thank you for your time and assistance!

[bglw]

Hey @eyallampel1 👋

Possibly Pagefind's Modular UI might be a good fit. It's still in a bit of a state of flux, so I'd pin an exact version, but it more closely supports using a search input in one area, and placing the results somewhere else. It runs the search on https://cloudcannon.com/documentation/ — so it's stable enough for production, just the API might change in a future release 🙂

[bobmonsour]

The Modular UI looks interesting, but it would be really nice if there was a CSS var that was exposed to allow styling of the background of the results area. I have the search box on every page of my site and when the visitor scrolls, it remains stuck at the top of the window. But when I do a search after such scrolling, the results are on a transparent background. It would seem that having a --pagefind-ui-results-background variable would be a welcome addition to the main repo. Until then, I'll keep my eye on the development of the Modular UI and remove the sticky page search box. Thanks for listening...and thanks for an incredible search package!

[bglw]

I can add that!

[bobmonsour]

Awesome!