Fix: mobile navigation title visibility remove the custom double nav implementation

[lakxy]

Fixes #6328

Proposed Changes

This PR removes the custom double nav bar implementation and properly utilizes Material for MkDocs' native navigation.tabs feature, as recommended by @evankanderson.

Changes Made

• overrides/partials/header.html: Removed hardcoded navigation tabs (lines 97-119) that created the double nav bar
• docs/stylesheets/extra.css: Added mobile-specific CSS fixes to ensure site title remains visible during scroll on mobile devices

Key Improvements

• Site name "Knative" now stays visible in header on mobile devices (< 1220px)
• Removed confusing title switching behavior during scroll on mobile
• Leverages Material's built-in responsive navigation instead of custom implementation
• Desktop behavior unchanged (title still transitions on scroll as expected)
• Tablet viewports properly handled (960px-1220px)

Before/After

Before (Mobile):

• Page title hidden when scrolling
• Navigation confusing with duplicate tab structures
• Header appeared empty on scroll

Screen.Recording.2025-11-15.164828.mp4

After (Mobile):

• Site name "Knative" always visible in header
• Clean navigation using native Material tabs
• Consistent header appearance during scroll

Screen.Recording.2025-11-15.165038.mp4

[netlify]

✅ Deploy Preview for knative ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	bb5a3e8
🔍 Latest deploy log	https://app.netlify.com/projects/knative/deploys/691b221d1f644a00082b60c6
😎 Deploy Preview	https://deploy-preview-6503--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: codeEvolveZenith345
Once this PR has been reviewed and has the lgtm label, please assign aliok 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

[lakxy]

/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.

[lakxy]

Hi @evankanderson
The PR is optimally tested and has built successfully...Please review it.

[dprotaso]

FYI - on desktop the nav is no longer visible

[lakxy]

Hi @dprotaso
Thanks a lot for pointing this out, I mistakenly dropped the nav for the desktop, it was not intentional...

Please review it and suggest modifications...
I have fixed that but I need feedback on the current mobile behavior, is it ok to have just the title in the nav and not the other nav related as in desktop...?

[dprotaso]

I have fixed that but I need feedback on the current mobile behavior, is it ok to have just the title in the nav and not the other nav related as in desktop...?

Can you clarify your question?

FYI - I see the nav now on the home page properly. But this change doesn't seem to fix the original linked issue.

eg.

navigating to https://deploy-preview-6503--knative.netlify.app/docs/

and then scrolling to the bottom replace Knative with the nav bar with Overview. On mobile I only see Knative and the version picker (which i can't click)

[dprotaso]

I'm not to familiar with how to fix this - unsure if @evankanderson knows

[lakxy]

I have fixed that but I need feedback on the current mobile behavior, is it ok to have just the title in the nav and not the other nav related as in desktop...?

Can you clarify your question?

FYI - I see the nav now on the home page properly. But this change doesn't seem to fix the original linked issue.

eg.

navigating to https://deploy-preview-6503--knative.netlify.app/docs/

and then scrolling to the bottom replace Knative with the nav bar with Overview. On mobile I only see Knative and the version picker (which i can't click)

Yeah, I actually misunderstoof the context of "double nav" for now I will draft this PR and open it once I have made the actual fix.