50px gap appears between title bar and nav bar when there are no header links

[george-hawkins]

🐛 Bug Report

When you have no headerLinks and the width available to display your site goes below 1024px then the navbar (that takes the place of the left and right sidebars) appears below the title bar, however there is a 50px gap between the two (where a second bar containing the header links would go, if there were any).

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

1. Set headerLinks to [] in siteConfig.js.
2. Open your site in your browser and resize your browser to reduce the width below 1024px.
3. At this width, the left and right sidebars disappear and are replaced by a navigation bar with left and right dropdowns.
4. The current CSS assumes the presence of hearer links that will appear in their own bar (when width is constrained). I.e. there should be a title bar, then a header bar and then a navbar.
5. However, if you have no headerLinks you just see empty space of 50px appear between the title bar and the navbar (note this really is a transparent empty space rather than an opaque space with no content - when you scroll your page you can see the underlying content scrolling upwards through this space).

Expected behavior

When there are no headerLinks and the navbar appears it should appear directly below the title bar.

Actual Behavior

Empty space appears between title bar and navbar.

Reproducible Demo

git clone git@github.com:george-hawkins/arf-drone.git
git checkout 9ee75bb

[george-hawkins]

1. This picture shows the gap between the title bar and the navbar:

2. I fixed this by adding the following to website/static/css/custom.css:

.navPusher {
    padding-top: 50px;
}

This shows the result, i.e. no more gap:

3. If I now click on the left of the navbar the resulting dropdown appears in the right place without any additional work being required:

4. However for some reason when clicking on the right the resulting dropdown there appears with a gap between it and the navbar (the underlying page, the title in this case, is visible in the gap):

5. I fixed this by adding the following to website/static/css/custom.css:

.tocActive .onPageNav {
    top: 98px;
}

This shows the result, i.e. no more gap:

So to see the version of my site without these changes checkout the hash shown in the original bug description. To see the version with these chages:

$ git show b84fc06
$ git checkout b84fc06

Note: on this repo I do all my work on a branch called "docusaurus" rather than on "master" - apologies for any confusion this causes.

Important: my fixes are only appropriate if you do not have header links, this is not a general solution that works for the both situations, i.e. whether or not one has header links.