Fix search bar expansion to overlay navigation items

[codeEvolveZenith345]

Description:

Fixes #6332

Proposed Changes

• Added CSS to make search bar expand as an overlay on desktop view when activated
• Search bar now floats above navigation items (Home, Docs, About, Blog, Community) instead of compressing them
• Logo, "Knative" title, and GitHub badge remain visible when search is expanded
• Desktop-only fix using media query @media screen and (min-width: 76.25em)
• No changes to HTML structure - pure CSS solution

Recording.2025-11-30.105520.mp4

[knative-prow]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: codeEvolveZenith345
Once this PR has been reviewed and has the lgtm label, please assign salaboy for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[netlify]

✅ Deploy Preview for knative ready!

Name	Link
🔨 Latest commit	02dc30a
🔍 Latest deploy log	https://app.netlify.com/projects/knative/deploys/6932f51fcf8c8562422941c3
😎 Deploy Preview	https://deploy-preview-6532--knative.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[codeEvolveZenith345]

/retest

[knative-prow]

@codeEvolveZenith345: Cannot trigger testing until a trusted user reviews the PR and leaves an /ok-to-test message.

Details

In response to this:

/retest

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[codeEvolveZenith345]

Hi! @dprotaso
I have implemented the initial version to resolve #6332 . Please review it.
The build is failing due to netlify-token issue, unrelated to my implementation.
I have attached a demo-screenrecording for reference of implementation.

Thank you.

[codeEvolveZenith345]

I have kept the expansion limited to the right side though, as the search bars normally remain on the side of their initial placement, then to expand over the entire screen.

[dprotaso]

I don't like the jitter that happens when you open it. Also the navigation text disappears so it doesn't look polished

[codeEvolveZenith345]

Hi @dprotaso
It would be easier for me to implement if you could be specific about its behavior?

[codeEvolveZenith345]

I request you to elaborate it thoroughly...

[dprotaso]

take a look at https://squidfunk.github.io/mkdocs-material/tutorials/

When you click the search bar it's right side is fixed and it expands to the left.

[dprotaso]

I'm not seeing much difference between the changes in this PR and what we already have on the knative.dev website

[codeEvolveZenith345]

Hi! @dprotaso
You are right, this PR is still under work, I tried to fix it but it is not complete yet, I am drafting it until I have not made it optimally working.

[codeEvolveZenith345]

Hi! @dprotaso You are right, this PR is still under work, I tried to fix it but it is not complete yet, I am drafting it until I have not made it optimally working.

Actually the mkdocs serve seemed to show no difference either, so I thought It is not working due to some issue, as the git too did not give actual diff made at git diff --stat so I had to commit the partial fix so as not to loose the progress!