Banner covers menu on mobile

[SimenB]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

screen-20220928-103739.mp4

https://jestjs.io/docs/cli#--filterfile

Reproducible demo

No response

Steps to reproduce

Click menu on mobile? 😅

Expected behavior

All links and text are visible

Actual behavior

Banner up top covers some of it

Your environment

• Public source code: https://github.com/facebook/jest/tree/main/website
• Public site URL: https://jestjs.io/docs/cli#--filterfile
• Docusaurus version used:
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome Android 105, Pixel 6 Pro
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Android 13

Self-service

• I'd be willing to fix this bug myself.

[AnteeHub]

It can be reproduced on official website of Docusaurus

[slorber]

😅 thanks, didn't catch this

Regression from #7940

temporary workaround to try:

.navbar--fixed-top {
  z-index: calc(var(--ifm-z-index-fixed) + 1);
}

[Pranav2612000]

@slorber
I'll like to work on this.
I tried the temporary workaround and it works. Do you want me to create a PR with it? Or do you want me to explore more and come up with a better solution?