BUG: Navigation items appear behind navigation title

[dimrozakis]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

I've found a bug and checked that ...

• ... the problem doesn't occur with the mkdocs or readthedocs themes
• ... the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
• ... the documentation does not mention anything about my problem
• ... there are no open or closed issues that are related to my problem

Description

When the navigation sidebar is scrolled down (requires enough items and short enough window height), the navigation list appears behind the navigation title because the title has a transparent background.

When using 8.1.3-insiders-4.5.0 this did not occur (That's actually not 100% accurate. The > icon for sections would appear behind the navigation title, but the page/section titles would not).

When switching to the latest version, the issue does occur.

Since the website where I'm experiencing this issue contains private information, it's not easy for me to provide screenshots and config files without having to censor things but fortunately I can reproduce this in 3rd party websites of opensource libraries. Please check for example the FastAPI docs https://fastapi.tiangolo.com/tutorial/debugging/ which appears to be using mkdocs-material-8.1.8+insiders-4.6.1.

Expected behaviour

The navigation list items shouldn't be visible behind the navigation title (site title).

Actual behaviour

The navigation items are visible behind the navigation title while scrolling down the navigation sidebar.

Steps to reproduce

https://fastapi.tiangolo.com/tutorial/debugging/

Check at the nav sidebar title on the following screenshot:

Package versions

• Python: python --version: 3.9.6 but seems irrelevant
• MkDocs: mkdocs --version: 1.2.3
• Material: pip show mkdocs-material | grep -E ^Version
  • Happens with the latest version 8.1.9-insiders-4.7.1
  • Happens on FastrAPI docs which use 8.1.8+insiders-4.6.1 according to html source.
  • Does NOT happen with 8.1.3-insiders-4.5.0 (but > icons do get displayed!)

Configuration

I haven't actually built the website like this, but since this is reproducible in the FastAPI docs, I suppose this will do https://github.com/tiangolo/fastapi/blob/master/docs/en/mkdocs.yml

System information

• Operating system: Linux Mint 19.1
• Browser: I can reproduce with Chromium 97.0.4692.71 & Firefox 96.0.3

[squidfunk]

Thanks for reporting! This is a regression that was introduced in 8.1.4+insiders-4.5.1, which adds some CSS to fix a weird rendering issue in Safari, which in turn was originally reported in #3396. This commit introduced the error you just reported. I think I fixed it in 67e15b3 and adjusted the original bugfix in #3396.

[dimrozakis]

Thanks @squidfunk. I tried building the website with the master branch of insiders & can confirm that it's working properly. The nav pages/sections don't appear behind the nav sidbar header. Neither do the > nav section icons (which was the case in 8.1.3-insiders-4.5.0).

[squidfunk]

The fix was just released as part of 8.1.9-insiders-4.7.2.