What causes the 'md-header__title--active' class to be added to the version block in the header?

[clubanderson]

We have a few versions on our mkdocs site served up by Mike now. We use the material theme. All pages in all versions should show the version dropdown at the top of the page. For some reason, we have 5 pages in our main branch that do not show the dropdown. These same pages, in the other versions, do show the dropdown. And, when an any of these pages eventually becomes part of a new release version, they will show the version dropdown.

We use some meta tags at the top of these 5 pages which could be causing the problem, but I am not sure how. One other note - I do see the dropdown appear for a split second, but then disappears like as if scrolling has started. This only happens for our main branch. All other versions are working fine.

compare this page https://docs.kubestellar.io/main/Coding%20Milestones/PoC2023q1/kubestellar-syncer/ (no dropdown) with this page https://docs.kubestellar.io/release-0.7/Coding%20Milestones/PoC2023q1/kubestellar-syncer/

our site is in source at - https://github.com/kubestellar/kubestellar/tree/main/docs

[clubanderson]

I did some investigation and found that the 5 affected pages have the 'md-header__title--active' class added to the version dropdown element. If I remove that class, the version dropdown shows as desired. Why do certain pages act as if scrolling has begun and stick the 'md-header__title--active' in the version dropdown element?

<div class="md-header__title md-header__title--active" data-md-component="header-title">
      <div class="md-header__ellipsis">
        <div class="md-header__topic">
          <span class="md-ellipsis">
            KubeStellar
          </span>
        <div class="md-version"><button class="md-version__current" aria-label="Select version">main</button><ul class="md-version__list"><li class="md-version__item"><a href="https://docs.kubestellar.io/release-0.7/" class="md-version__link">release-0.7</a></li><li class="md-version__item"><a href="https://docs.kubestellar.io/release-0.6/" class="md-version__link">release-0.6</a></li><li class="md-version__item"><a href="https://docs.kubestellar.io/release-0.5/" class="md-version__link">release-0.5</a></li><li class="md-version__item"><a href="https://docs.kubestellar.io/release-0.4/" class="md-version__link">release-0.4</a></li><li class="md-version__item"><a href="https://docs.kubestellar.io/release-0.3/" class="md-version__link">release-0.3</a></li><li class="md-version__item"><a href="https://docs.kubestellar.io/release-0.2/" class="md-version__link">release-0.2</a></li><li class="md-version__item"><a href="https://docs.kubestellar.io/main/" class="md-version__link">main</a></li></ul></div></div>
        <div class="md-header__topic" data-md-component="header-topic">
          <span class="md-ellipsis">
            
              Extended Example
            
          </span>
        </div>
      </div>
    </div>

[squidfunk]

Good question. Without a minimal reproduction, it's hard to know what's happening exactly. If you can provide one, we're happy to look into it. Make sure to remove all customizations, as they could be causing this problem.

[clubanderson]

Thanks. I figured it out. We can close the discussion.

[squidfunk]

Could you please explain what the problem was and how you fixed it? You'd be helping other users experiencing the same or a similar issue ☺️