Skip to content
Copied!
published on 2026-09-11

1. Why the Official Navbar Is Not Used

The official Docsify Navbar is designed to provide navigation among pages within a documentation site. Setting loadNavbar: true and adding _navbar.md generates .app-nav from Markdown inside #app. Its links assume Docsify hash routing, and on narrow screens they can be integrated into the sidebar. This arrangement is appropriate for presenting pages within a single documentation site.

Real Terms instead requires cross-site navigation. The links connect the emotiongraphics.jp home page, Real Terms at /ai/, Significant Bit at /docs/, and About. They therefore use regular origin-relative URLs instead of Docsify #/… routes. The navigation also has a fixed height of 64px and hides while the page is scrolled downward. On narrow screens, the appearance and language controls are placed in a hamburger menu shared with the VitePress implementation. The logo links to the eMotionGraphics publisher home page rather than to Real Terms itself.

Using the official Navbar together with the site navigation would create the following conflicts.

  • Height
    The vendor CSS defines --navbar-height as 4em. The site navigation uses a height of 64px and applies the same value to the content padding-top and the fixed sidebar top. Placing both navigation elements on the page would cause the content and sidebar offsets to differ.
  • Stacking order
    .app-nav has a z-index of 20, while the sidebar uses 60. The site navigation uses 40 in its normal state and 60 while its menu is open. Adding the official Navbar would therefore introduce conflicts with the narrow-screen overlay.
  • Narrow screens
    Docsify can hide .app-nav and integrate its links into the sidebar. In contrast, the hamburger menu shared with VitePress is a full-screen panel whose role differs from search and the article table of contents. Combining them would obscure the distinction between navigation across sites and navigation within the documentation.

For these reasons, the Real Terms $docsify configuration enables loadSidebar: true and does not specify loadNavbar. It does not include _navbar.md or use a Navbar plugin. The only libraries loaded by the HTML shell are the project-local docsify.min.js and the official search.min.js.

The site navigation consists of two files.

  • site/app.js
    ensureSiteNav() generates header.eg-site-nav and is called by the Docsify siteChrome plugin.
  • site/theme.css
    The Site navbar (eMotionGraphics chrome) section defines fixed positioning, visibility while scrolling, and the hamburger menu used at widths of 768px and below.

Docsify remains responsible for the sidebar, search, hash routing, auto2top, and article rendering. Cross-site navigation is kept outside its rendering area. The next chapter explains when the site navigation is generated and where it is inserted.