FIX: #684 Navbar height is oversized on first load and fixes only after refresh

[kanishka-commits]

Summary

This PR fixes issue #684 in the docs UI where an extra “Home” item appeared in the navbar and the header height behaved inconsistently between first load, scroll, and refresh.

The root cause was the navigation.tabs feature being enabled in MkDocs Material while the docs only define a single top-level page (Home). This caused Material to render a top tabs bar with a redundant “Home” tab, leading to apparent duplication and layout instability.

---

What was happening

• On initial page load, MkDocs Material rendered:
  • the header (logo + title), and
  • a top tabs bar (<nav class="md-tabs">) containing a single “Home” tab
• This resulted in:
  • an extra “Home” entry in the UI
  • a taller-than-expected navbar on first load
• On scroll or refresh, layout recalculation made the issue appear inconsistent

---

✅ Fix

• Disabled the navigation.tabs feature in mkdocs.yml
• This prevents MkDocs Material from generating the top tabs bar entirely

Result:

• No duplicate “Home” item
• Consistent navbar height across:
  • initial load
  • scroll
  • refresh
• Cleaner and more predictable docs navigation

---

Changes

• Removed navigation.tabs from the MkDocs Material theme configuration
• No changes to content or structure of documentation pages

---

Screenshots / Recording

Before: Duplicate “Home” tab visible at the top

Screen.Recording.2025-12-07.at.7.42.16.PM.mov

---

After: Single “Home” entry with stable navbar

Screen.Recording.2025-12-07.at.7.41.04.PM.mov

---

Checklist

• I agree to follow this project's Code of Conduct
• Docs UI renders correctly on first load, scroll, and refresh
• No visual duplication in navigation
• No breaking changes introduced
• Unit tests — Not applicable (docs configuration change only)

---

Additional Notes

If top-level tabs are needed in the future (e.g., multiple sections such as Docs, API, Guides), navigation.tabs can be safely re-enabled once multiple root navigation entries exist.

Summary by CodeRabbit

• Chores
  • Disabled navigation tabs feature in the documentation interface. The navigation tabs will no longer be displayed in the documentation system.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The MkDocs configuration was modified to disable the navigation.tabs feature by commenting out the relevant line in mkdocs.yml. The rest of the configuration structure and other features remain intact.

Changes

Cohort / File(s)	Summary
Configuration Updates mkdocs.yml	Disabled the navigation.tabs feature by commenting out the associated configuration line

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰 A tab was tucked away with care,
Commented lines floating in the air,
MkDocs config took a simple rest,
Navigation refined, nothing more blessed!

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: disabling the navigation.tabs feature to fix the oversized navbar height issue on first load, which is the primary purpose of this PR.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d07d817 and c2f0c73.

📒 Files selected for processing (1)

• mkdocs.yml (1 hunks)

🔇 Additional comments (1)

mkdocs.yml (1)

13-14: Excellent fix: directly targets the root cause with clear documentation.

The change properly disables navigation.tabs which was creating the redundant tabs bar for a single top-level navigation item. The explanatory comment is helpful for future maintainers. Commenting out rather than deleting preserves reversibility—if the navigation structure expands to multiple top-level items later, re-enabling this feature is straightforward.

The reported issue (navbar height inconsistency, duplicate "Home" entry) should be resolved by preventing Material from rendering the redundant top tabs component.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[vivekkumar04-max]

I wanted to work on this issue can you assign it to me.

[V4Vikaskumar]

Hi @maintainers 👋
I’d like to work on this issue as well since there hasn’t been an update yet.
Please let me know if I can proceed or if someone is already assigned.
Thanks!