Mobile navbar

[tshort]

The existing navbar is a little limited on small screens. Depending on the site, some menu items get cut off, and the search bar is left off. Dropdown menus are also broken.

Here is an example of a Hugo-themed site that uses a hamburger button that expands into a menu:

https://themes.gohugo.io/theme/educenter-hugo/

[LisaFC]

Oh nice, I'll have a look at that, thanks for finding it.

Can I mark this as a duplicate of #211 as it's addressing the same problem?

[LisaFC]

Actually just to clarify (now that I've looked at the Educenter theme) is the issue here with the top level nav menu? It is scrollable if menu items don't all display (I've just checked), I'm just concerned we'd end up with too many hamburger buttons given that the nav in the docs/blog section is also expandable in mobile, and it's nice for users to see some options without having to click anything even on a small screen. Open to suggestions though (inc if someone wants to make it configurable).

The search box vanishing is an issue, I think the way we have it set up is that the sidebar search comes across and replaces it on mobile, but that doesn't work if you've disabled sidebar search.

#211 is more about the nav in the docs/blog section vanishing on mobile if we remove the sidebar search, which is different (but related) so I'll keep the two separate for now.

[tshort]

I understand the issue with having two hamburger buttons. That could be confusing. I see the Apache Airflow site does have two hamburger buttons, and it's not too bad.

The navbar menu is scrollable, but it's not obvious that it's there or that it could be scrollable (unless a menu item is obviously cut off, but then that looks clunky). Maybe it needs an arrow or other indicator that something's there. Or, maybe the navbar hamburger button could go there after the first couple of items to give a more complete view.

The other problem I'm having is that the dropdowns don't work on mobile. I can't find an online example of that because the versions online that have a version dropdown, that menu item drops from mobile (another problem--how do you switch versions on mobile?). For an example I have locally, I see the navbar menu, but when I click it, the submenu does not appear.

It's all rather tricky!

[razonyang]

I have the similar issue, language dropdown menu doesn't show up in mobile screen.
When enable Algolia search, there is no way to switch to another language in small mobile screen, since sidebar search is disabled.

[js-xc]

I seem to have another issue with Algolia search enabled: the top search bar is replaced by the sidebar search field for smaller screens/mobile even though sidebar search is disabled, and accordingly, the now visible search bar does not work. How could this be fixed?

[LisaFC]

Hmm, that sounds wrong. @alexearnshaw (who added the Algolia feature), can you take a look?

[haubourg]

Hi there, we are hitting this issue too. (Just raising hand to keep this issue alive)

[kimberleybrown]

Hey everyone,

Was the above issue fixed by any chance? I've read the documentation regarding Algolia not supporting the sidebar, however our team recently re-enabled Algolia on our doc site for testing and we do not see the search box appearing in the mobile navigation dropdown. When I inspect the mobile navigation, I see the element <div id="docsearch"></div> but it is empty.

Is there any additional configuration settings or modifications that need to be made to the search-input partial to enable this? I see the search box on desktop just fine.

[LisaFC]

Closing this as a duplicate of #1433 where I have a slightly hacky workaround and will investigate something less weird.