docs: prevent header tabs from overlapping on search expand

[jijo-OO7]

Header tabs overlap when search expands [Fixes #6332]

BEFORE

Proposed Changes

• Fixed navigation layout shift when search is activated
• Restructured header to use separate sticky navigation container
• Maintained responsive design across all breakpoints

Reference: https://squidfunk.github.io/mkdocs-material/tutorials/

AFTER

[netlify]

✅ Deploy Preview for knative ready!

Name	Link
🔨 Latest commit	6b64dc1
🔍 Latest deploy log	https://app.netlify.com/projects/knative/deploys/696920fba8f76ac900ee1090
😎 Deploy Preview	https://deploy-preview-6556--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.

[knative-prow]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: jijo-OO7
Once this PR has been reviewed and has the lgtm label, please assign dprotaso 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

[codeEvolveZenith345]

Hi @jijo-OO7 I don't think you have actually followed the issue discussion, read it then open the PR.

[codeEvolveZenith345]

This is totally mis-aligned from what @dprotaso described there.

[dprotaso]

Yeah I don't see any difference on Chrome Desktop.

[dprotaso]

Note the idea is for the home, docs etc in the top row to not move when the search bar has focus

[jijo-OO7]

Thanks for the pointer. I’ve re-read the original issue discussion and I see where the intent differs from the current implementation.
Based on @dprotaso’s clarification, I’ll update the PR so the top navigation remains static when the search bar gains focus

[jijo-OO7]

Hi @dprotaso Updated the implementation based on your feedback. The top navigation now remains static when search gains focus by moving to a separate sticky container, following the Material for MkDocs pattern.

Would appreciate your review to ensure this matches the intended behavior. Let me know if any further adjustments are needed.

[codeEvolveZenith345]

@jijo-OO7 I am not sure if this is what was described? the before version is not complete, initially there were elements in nav beside the search bar, which have been removed in after version,
You explicitly hid that part in PR description? why?

[codeEvolveZenith345]

Final review to @dprotaso . Does not seem optimal to me.

[codeEvolveZenith345]

Thanks for the pointer. I’ve re-read the original issue discussion and I see where the intent differs from the current implementation. Based on @dprotaso’s clarification, I’ll update the PR so the top navigation remains static when the search bar gains focus

@jijo-OO7 Again, you did not follow the issue discussion, as Far as I know the nav elements were described to be overlayed by search bar expansion and not removed.

[dprotaso]

Yeah this doesn't look correct

[jijo-OO7]

@dprotaso Could you try reloading the preview? The navigation elements remain visible on my local build and the search expands as expected per the Material for MkDocs pattern. A cache refresh might resolve any discrepancies.

[dprotaso]

I would expect Home etc. to be at the same horizontal line as the search bar

[jijo-OO7]

Got it, thank you for clarifying. I understand now, the navigation items should remain aligned on the same horizontal line as the search bar. I'll revisit the implementation to ensure proper alignment and will push an updated commit shortly with Home, Docs, About, Blog, and Community properly aligned alongside the search bar.