I tried something like this. A downside of this is that the dropdown menus are hidden in mobile view.

Looks very nice, but that's a concern of mine with this as well, works fine on the web but currently drop-downs don't display in the mobile versions of Docsy sites so you'd have inaccessible menu items for those users (if you expect to have a lot of mobile users) unless you also have the item in eg the docs/blog left nav or a landing page. It's already an issue for people using the existing version and language drop-downs.

Here's the existing issue for mobile menu issues but I don't think anyone's got around in these virus-y times to looking at it yet, alas. #223

In general can you give me a use case for this? Is it so users can get to menu subitems from eg the landing page without having to go into the docs? Sometimes too many nav options can be confusing....

We have a section of our docs that is divided in 2 parts, a visualization tool that has its own layouts and a documentation side that drills down into specifics of the visualization. The visualization does not have a side menu so it can take the whole screen.

Rather than having:
... | X-tool | X-docs | ...

We would rather have
... | X | ...
|- tool
|- docs

We do not have mobile users, but that likely is not the case for most people.

I did some digging around and removing these lines show the dropdown menu in mobile.
https://github.com/google/docsy/blob/master/assets/scss/_nav.scss#L81
https://github.com/google/docsy/blob/master/assets/scss/_nav.scss#L91

and the d-none here:
https://github.com/frank-segui/docsy/blob/feature/add-main-dropdown-menu/layouts/partials/navbar.html#L17

but then the menu items that dont fit in the screen still appear halfway.