Sub menu is difficult to use on mobile

[markdevjapan]

First off, I am loving this theme and I am going to use it on a community project I am about to start.

I do however have some issue with the usability of the site. When you change to a mobile view. The left sidebar menu jumps all the way down to the bottom, however there is no where to click to jump to that. A user who isn't familiar with responsive design practices and on a particularly long page, this would appear lost and make the user unable to navigate. The right sidebar disappears all together

1. I suggest having these in the fixed nav bar when on mobile and make that scrollable to many sections can be added.

2. The right sidebar is removed completely from view. I suggest having it places in the body of the text, under the main title with a sub-title of "table of contents"

Another idea I just had is to make both this appear as a new bar under the current bar and have them also fixed. Forgive the terrible design I am on someone elses' computer and only have chrome inspection tools to play with but here is an example of what I mean:

https://imgur.com/a/6xHKU4f

Thoughts ?

[h-enk]

Great to hear and thanks for sharing your ideas! A better mobile navigation UX was on my mind too 😉

I was also thinking of a second bar below the current one, and I agree that the left sidebar navigation should be available on top. Something in line with your example and e.g. the new Bootstrap 5 Docs setup:

I was not quite sure about making the TOC available on mobile. But, I see now that current practice changed — see e.g. the mobile screens of:

• the new Gatsby Docs: https://www.gatsbyjs.com/docs/reference/config-files/gatsby-config/ and
• the new Bootstrap 5 Docs: https://getbootstrap.com/docs/5.0/getting-started/introduction/

So. I'll reconsider that.

I will add an issue to better the mobile navigation UX. I expect this to be picked up with the migration to Bootstrap 5 (Hyas already is on BS5) and the multilingual preparation (but apart from the docs versioning preparation).

Are you OK with testing/providing your feedback on a test setup?

[h-enk]

See also: #68