This is an automated email from the ASF dual-hosted git repository.
moonming pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-website.git
The following commit(s) were added to refs/heads/master by this push:
new 3f70e8655c7 fix(nav): keep the header brand on one line at desktop
widths (#2088)
3f70e8655c7 is described below
commit 3f70e8655c759e5ba2bc6122741196f7757e322e
Author: Ming Wen <[email protected]>
AuthorDate: Thu Jul 30 11:35:43 2026 +0800
fix(nav): keep the header brand on one line at desktop widths (#2088)
The site-header constrained its row to the 1140px page column while the
desktop nav grew past it (nav ~1020px + DocSearch 155px + brand 175px
needs ~1215px on docs pages), so flexbox squeezed the only shrinkable
item: the brand link. 'Apache APISIX(R)' wrapped onto two lines and the
wordmark overlapped the Docs item at every desktop width.
Fix:
- the brand never shrinks or wraps (flex-shrink: 0, white-space: nowrap)
- the header row spans the full viewport again, like the pre-Astro
Docusaurus navbar, instead of the 1140px column
- 997-1365px: nav links tighten and the DocSearch button collapses to
its icon (keeps its aria-label)
- 997-1139px: the brand wordmark hides, leaving the logo mark
- below 996px the burger collapse is unchanged (wordmark stays visible)
Verified against the live docs page markup at 1440/1366/1280/1140/1139/
997/996/375px: one line everywhere, zero nav overflow, >=50px slack at
every tier seam.
---
next/src/styles/global.css | 24 ++++++++++++++++++++----
1 file changed, 20 insertions(+), 4 deletions(-)
diff --git a/next/src/styles/global.css b/next/src/styles/global.css
index cc4362736f8..e5fbdf11c0e 100644
--- a/next/src/styles/global.css
+++ b/next/src/styles/global.css
@@ -47,8 +47,10 @@ a:hover { text-decoration: underline; }
border-bottom: 1px solid var(--color-border);
height: var(--header-height);
}
-.site-header .container { display: flex; align-items: center; gap: 1rem;
height: 100%; }
-.brand { display: flex; align-items: center; gap: .5rem; font-weight: 700;
color: var(--color-text); font-size: 1.05rem; }
+/* Full-bleed like the pre-Astro navbar: the desktop nav plus DocSearch
+ (~1210px on docs pages) is wider than the 1140px page column. */
+.site-header .container { display: flex; align-items: center; gap: 1rem;
height: 100%; max-width: none; }
+.brand { display: flex; align-items: center; gap: .5rem; font-weight: 700;
color: var(--color-text); font-size: 1.05rem; flex-shrink: 0; white-space:
nowrap; }
.brand img { height: 30px; width: auto; }
.brand:hover { text-decoration: none; }
.main-nav { margin-left: auto; display: flex; align-items: center; gap:
.25rem; }
@@ -70,8 +72,22 @@ a:hover { text-decoration: underline; }
.nav-drop .menu a:hover { background: var(--color-surface-alt);
text-decoration: none; }
.mobile-toggle { display: none; }
-/* 996px matches production's collapse point; below ~1000px the desktop nav
- only fits by wrapping the brand wordmark onto two lines. */
+/* The brand never wraps (flex-shrink: 0 above); instead the header sheds
+ chrome as the viewport narrows. Budget at the default font metrics:
+ brand 175px + gap 16px + nav ~870px + DocSearch button 155px ≈ 1215px. */
+@media (min-width: 997px) and (max-width: 1365px) {
+ .main-nav { gap: .125rem; }
+ .main-nav > a, .nav-drop > summary { padding: .4rem .5rem; }
+ /* icon-only search button (the button keeps its aria-label) */
+ .site-header .DocSearch-Button-Placeholder,
+ .site-header .DocSearch-Button-Keys { display: none; }
+}
+@media (min-width: 997px) and (max-width: 1139px) {
+ .brand span { display: none; }
+}
+
+/* 996px matches production's collapse point: the desktop nav gives way to
+ the burger menu. */
@media (max-width: 996px) {
.main-nav { display: none; }
.mobile-toggle { display: block; margin-left: auto; }
