Sticky navigation tabs have wrong spacing in Insiders 4.15.2+

[StarfallProjects]

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

In mkdocs-material-8.2.15-insiders-4.15.2 the top nav menu is small.

It was ok in mkdocs-material-8.2.15-insiders-4.15.1 (rolling back to that version fixed it)

Expected behaviour

A nicely-tyled top nav

Actual behaviour

A not-nicely styled top nav

Steps to reproduce

1. Install mkdocs-material-8.2.15-insiders-4.15.2
2. Build or serve

Package versions

• Python: 3.10.2
• MkDocs: 1.3.0
• Material: mkdocs-material-8.2.15-insiders-4.15.2 (note that I haven't tried with non-insiders)

Configuration

https://github.com/n8n-io/n8n-docs/blob/main/mkdocs.yml (I have tested it without the extra_css)

System information

• Browsers: tested in Chrome, Firefox, Edge
• My OS is Windows 10, but this is also happening on our live site, which is built by Netlify (their build image is Ubuntu-based I believe)

[squidfunk]

Thanks for reporting. You say you tested without the extra CSS, but then I'm wondering why our documentation page doesn't exhibit the same behavior. Have you checked whether the error might be triggered by your overrides? I'm asking, because you ticked the box, but I'm having trouble to reproduce it.

[StarfallProjects]

Still seeing it with overrides removed (my apologies for not checking properly before)

Here is the mkdocs.yml in my test, excluding the nav:

site_name: n8n Documentation
theme:
  name: material
  favicon: _images/favicon.ico
  font:
    text: Open Sans
  language: en
  logo: _images/n8n-docs-icon.svg
  palette:
      scheme: light
  features:
    # https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/?h=navigation+tabs#navigation-tabs
    - navigation.tabs
    - navigation.tabs.sticky
    # https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/?h=navigation+tabs#anchor-tracking
    - navigation.tracking
extra:
  analytics:
    provider: google
    property: UA-146470481-3
  consent:
    title: Cookie and analytics consent
    description: 
      We use cookies (and other similar technologies) to collect data in order to improve our site. You have the option to opt-in or opt-out of certain cookie tracking technologies. For more information on privacy and data management at n8n, refer to our <a href="https://n8n.io/legal/privacy" target="_blank">privacy policy</a>.
markdown_extensions:
  # https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown/?h=attr#attribute-lists attr_list is required for several other features. Always enable.
  - attr_list
  # https://squidfunk.github.io/mkdocs-material/reference/admonitions/?h=admoni
  - admonition
  # https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown/#markdown-in-html
  - md_in_html
  # https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/#superfences Used for tags, setting unique templates for certain pages, and other custom frontmatter.
  - meta
  - pymdownx.details
  # https://squidfunk.github.io/mkdocs-material/reference/icons-emojis/
  - pymdownx.emoji:
      emoji_index: !!python/name:materialx.emoji.twemoji
      emoji_generator: !!python/name:materialx.emoji.to_svg
  # https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/#highlight
  - pymdownx.highlight:
      linenums: true
  # https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/#superfences Superfences is required for several other features. Always enable.
  - pymdownx.superfences
  - pymdownx.tasklist:
      custom_checkbox: true
  # https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/#inlinehilite
  - pymdownx.inlinehilite
  # https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/#snippets
  - pymdownx.snippets
  # https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/#tabbed
  - pymdownx.tabbed:
      alternate_style: true
  - tables
  # https://www.mkdocs.org/user-guide/writing-your-docs/#linking-to-pages
  - toc:
      permalink: "#"
plugins:
  - search
  - literate-nav

[StarfallProjects]

Created a test repo: https://github.com/StarfallProjects/n8n-docs-test

[squidfunk]

Thanks! Does it go away when you remove navigation.tabs.sticky? Otherwise, are you able to further reduce the example?

[StarfallProjects]

Removing navigation.tabs.sticky seems to fix it, yes!

[squidfunk]

Fixed in d3c587b. This bug was exclusive to Insiders and was introduced with the release of navigation.prune. The tabs items received the wrong classes when tabs were made sticky, as they are now rendered as part of the header partial. This partial defined a Jinja class variable that leaked into the tabs item partial. Classes are now properly cleared.

[squidfunk]

Released as part of 8.2.16+insiders-4.16.1.