Page title is hidden when scrolled on mobile

[thisisobate]

Expected Behavior

Page title should be visible when page is scrolled down on mobile devices

Actual Behavior

Page title is hidden

Steps to Reproduce the Problem

1. Navigate to the concepts page
2. Scroll from top nav to bottom
3. See how title in top nav is hidden

Install information:

• Knative Version: Pre-release

[codeEvolveZenith345]

Hi @thisisobate I visited the page and checked the state, it is same for all the pages, so I guess it is intended and not a bug.

[codeEvolveZenith345]

Hi @evankanderson can you take a look at the page and give verdict over its validation as a bug or intended behaviour?

https://knative.dev/docs/

thank you.

[evankanderson]

Suggests that this is not fixed.

I suspect the fix is to undo a lot of the "double nav bar" work which was done to fit the top-level sections and the different documentation sections into the top bar. They basically only considered desktop, so mobile loses both the page title and makes the nav pretty confusing.

[codeEvolveZenith345]

Hi @evankanderson thank you for clarifying, I was referencing the page on desktop and not on phone, so I did not get that view. If you would like to get this fixed then please do assign it to me, I will find an optimal fix, and based on your approval of my implementation, I will move forward!

Thank you.

[evankanderson]

/assign @codeEvolveZenith345

[codeEvolveZenith345]

Hi @evankanderson Thank you for the assignment, I expect particular/expected design patters to be followed for implementation for references, Please give a high-level implementation overview for an optimal fix!

thank you.

[evankanderson]

Sorry for the late follow-up!

Material for Mkdocs has a navigation.tabs feature that should do a lot of this, but (with the best of intentions) we ended up creating a second set of tabs in the header bar. I think if we can remove that customization, the narrow-window mobile navigation overlaps should be removed.

Note that we will still need to do some form of customization of the navigation, because the actual structure of the build documents is:

• (root)
  • Current Version Docs
  • About
  • Blog
  • Community
  • Previous Version Docs
  • N-2 Version Docs
  • Pre-release Docs

We collapse all the "Version Docs" into a single "Docs" header predicated on the selected version, while "About", "Blog", and "Community" have non-versioned navigation, because those components aren't really versioned in the same way the technical documentation (under docs/versioned in the repo) is.