Adjust navbar heights and main-container layout (google#2528)

chalin · web-flow · commit e27e41371b23 · 2026-02-08T14:31:16.000-05:00
diff --git a/.vscode/cspell.json b/.vscode/cspell.json
@@ -4,6 +4,7 @@
   "caseSensitive": true,
   "words": [
     "anchorize",
+    "baseof",
     "chalin",
     "CNCF",
     "docset",
diff --git a/assets/scss/td/_footer.scss b/assets/scss/td/_footer.scss
@@ -6,10 +6,6 @@
   min-height: 150px;
   padding-top: map-get($spacers, 5);
 
-  @include media-breakpoint-down(lg) {
-    min-height: 200px;
-  }
-
   /* &__left { } */
 
   &__center {
diff --git a/assets/scss/td/_main-container.scss b/assets/scss/td/_main-container.scss
@@ -2,7 +2,14 @@
 .td-outer {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+
+  min-height: calc(
+    100vh - #{$td-navbar-min-height} - #{$td-navbar__main-min-height-mobile}
+  );
+
+  @include media-breakpoint-up(md) {
+    min-height: 100vh;
+  }
 }
 
 // The outer page container for the default base template.
@@ -24,12 +31,9 @@
 
 .td-main {
   flex-grow: 1;
-  @at-root .td-section &,
-    .td-page & {
-    // Use flex so descendant elements (like <main>) can grow to fill the
-    // available vertical (viewport) space, but only for docs layouts (it breaks
-    // td-home, which needs column-based layout). We select docs layouts via
-    // .td-section and .td-page above.
+  // Use flex when this container has a sidebar so descendant elements with
+  // flex:1 (like <main> in docs layouts) can grow.
+  &:has(> .row > .td-sidebar) {
     display: flex;
   }
 }
diff --git a/assets/scss/td/_nav.scss b/assets/scss/td/_nav.scss
@@ -29,7 +29,7 @@ $td-link-underline-offsets: (
   backdrop-filter: var(--td-navbar-backdrop-filter);
   border-bottom: var(--td-navbar-border-bottom);
 
-  min-height: $td-navbar-min-height;
+  min-height: $td-navbar-min-height + $td-navbar__main-min-height-mobile;
   margin: 0;
   z-index: 32;
 
@@ -74,6 +74,8 @@ $td-link-underline-offsets: (
     }
   }
 
+  // &__main { }
+
   // For .td-search__input styling, see _search.scss
 
   .dropdown {
@@ -83,6 +85,7 @@ $td-link-underline-offsets: (
   @include media-breakpoint-up(md) {
     position: fixed;
     top: 0;
+    min-height: $td-navbar-min-height;
     width: 100%;
 
     .nav-item {
diff --git a/assets/scss/td/_navbar-mobile-scroll.scss b/assets/scss/td/_navbar-mobile-scroll.scss
@@ -9,7 +9,7 @@
 @include media-breakpoint-down(lg) {
   .td-navbar-nav-scroll {
     max-width: 100%;
-    height: 2.5rem;
+    min-height: $td-navbar__main-min-height-mobile;
     overflow: hidden;
     font-size: 0.9rem;
   }
diff --git a/assets/scss/td/_sidebar-toc.scss b/assets/scss/td/_sidebar-toc.scss
@@ -12,6 +12,11 @@
 
   @supports (position: sticky) {
     position: sticky;
+
+    // Keep the sidebar below the fixed navbar in both states: margin-top
+    // applies in normal flow (before stickiness); top applies in the sticky
+    // state.
+    top: $td-navbar-min-height;
     margin-top: $td-navbar-min-height;
     height: calc(100vh - #{$td-navbar-min-height});
     overflow-y: auto;
diff --git a/assets/scss/td/_variables.scss b/assets/scss/td/_variables.scss
@@ -45,3 +45,4 @@ $td-block-space-bottom-base: 4 * $spacer !default;
 
 $td-navbar-bg-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !default;
 $td-navbar-min-height: 4rem !default;
+$td-navbar__main-min-height-mobile: 2.5rem !default;
diff --git a/assets/scss/td/blocks/_blocks.scss b/assets/scss/td/blocks/_blocks.scss
@@ -1,5 +1,15 @@
 @import 'cover';
 
+.td-below-navbar {
+  &.td-box,
+  &.td-cover-block {
+    @include media-breakpoint-up(md) {
+      margin-top: $td-navbar-min-height;
+      padding-top: $td-block-space-top-base !important;
+    }
+  }
+}
+
 .td-bg-arrow {
   &-wrapper {
     position: relative;
diff --git a/assets/scss/td/blocks/_cover.scss b/assets/scss/td/blocks/_cover.scss
@@ -2,15 +2,6 @@
 
 @include td-box-height-modifiers('.td-cover-block');
 
-.td-cover-block {
-  &.td-below-navbar {
-    @include media-breakpoint-up(md) {
-      margin-top: $td-navbar-min-height;
-      padding-top: $td-block-space-top-base !important;
-    }
-  }
-}
-
 .td-cover-logo {
   margin-right: 0.5em;
 }
diff --git a/docsy.dev/assets/scss/_navbar.scss b/docsy.dev/assets/scss/_navbar.scss
@@ -30,6 +30,10 @@
         .nav-link {
           --bs-nav-link-color: initial;
         }
+
+        .td-search {
+          color: initial;
+        }
       }
     }
   }
diff --git a/docsy.dev/content/en/_index.md b/docsy.dev/content/en/_index.md
@@ -18,11 +18,12 @@ params:
 
 <!-- prettier-ignore -->
 <div class="td-cta-buttons my-5">
-  <a {{% _param btn-lg primary %}} href="about/">
-    Learn more
+  <a {{% _param btn-lg primary %}} href="docs/get-started/">
+    Get started with Docsy
   </a>
-  <a {{% _param btn-lg secondary %}} href="docs/get-started/">
-    Get started
+  <a {{% _param btn-lg secondary %}}
+    href="{{% param example_site_url %}}">
+    Explore the example site
   </a>
 </div>
 
diff --git a/docsy.dev/content/en/blog/2026/0.14.0.md b/docsy.dev/content/en/blog/2026/0.14.0.md
@@ -129,11 +129,14 @@ background. The navbar's [light/dark color theme][] is now configurable
 navbar style matches your base site's style for a consistent look and
 feel.[^navbar-bg-color]
 
-Navbar **height and styling** are tunable via:
+Navbar **height and styling** are tunable via ({{%_param BADGE
+EXPERIMENTAL info %}}):
 
 <!-- prettier-ignore -->
-- `$td-navbar-min-height` SCSS variable
-- <details><summary>CSS variables (EXPERIMENTAL)</summary>
+- SCSS variables:
+  - `$td-navbar-min-height`
+  - `$td-navbar__main-min-height-mobile`
+- <details><summary>CSS variables</summary>
 
   - `--td-navbar-bg-color`
   - `--td-navbar-backdrop-filter`
@@ -473,11 +476,11 @@ Docsy 0.12.0][]: follow them, using version **0.14.0** where the guide refers to
     the named Docsy versions. Later versions may work, but are not officially
     supported.
 
-<section class="td-checkbox-list-wrapper">
-
 <details>
 <summary class="h4 text-primary"><span class="fa-regular fa-square-check"></span> Checks</summary>
 
+<section class="td-checkbox-list-wrapper">
+
 ### Sanity checks
 
 After upgrading, review the following:
@@ -537,20 +540,47 @@ These quick checks relate to the style and behavior changes in 0.14.0.
 
 Review these updated files and port changes as needed:
 
+- [ ] [layouts/\_markup/render-blockquote-alert.html][render-blockquote-alert.html]
 - [ ] [layouts/\_partials/navbar.html](#navbar-actions)
+- [ ] [layouts/\_partials/sidebar-tree.html][sidebar-tree.html]
+- [ ] [layouts/\_partials/sidebar.html][sidebar.html]
+- [ ] [layouts/\_shortcodes/blocks/cover.html][blocks/cover.html]
 - [ ] [layouts/\_shortcodes/blocks/lead.html][blocks/lead.html]
 - [ ] [layouts/\_shortcodes/blocks/section.html][blocks/section.html]
+- [ ] [layouts/\_shortcodes/pageinfo.html][pageinfo.html]
+- [ ] [layouts/\_shortcodes/td/site-build-info/netlify.md][site-build-info-netlify.md]
+- [ ] [layouts/blog/baseof.html][blog/baseof.html]
 - [ ] [layouts/community/list.html][community/list.html]
-
+- [ ] [layouts/docs/baseof.html][docs/baseof.html]
+- [ ] [layouts/swagger/baseof.html][swagger/baseof.html]
+
+[render-blockquote-alert.html]:
+  <{{% param github_repo %}}/blob/main/layouts/_markup/render-blockquote-alert.html?plain=1>
+[sidebar.html]:
+  <{{% param github_repo %}}/blob/main/layouts/_partials/sidebar.html?plain=1>
+[sidebar-tree.html]:
+  <{{% param github_repo %}}/blob/main/layouts/_partials/sidebar-tree.html?plain=1>
+[blocks/cover.html]:
+  <{{% param github_repo %}}/blob/main/layouts/_shortcodes/blocks/cover.html?plain=1>
 [blocks/lead.html]:
   <{{% param github_repo %}}/blob/main/layouts/_shortcodes/blocks/lead.html?plain=1>
 [blocks/section.html]:
   <{{% param github_repo %}}/blob/main/layouts/_shortcodes/blocks/section.html?plain=1>
+[pageinfo.html]:
+  <{{% param github_repo %}}/blob/main/layouts/_shortcodes/pageinfo.html?plain=1>
+[site-build-info-netlify.md]:
+  <{{% param github_repo %}}/blob/main/layouts/_shortcodes/td/site-build-info/netlify.md?plain=1>
+[blog/baseof.html]:
+  <{{% param github_repo %}}/blob/main/layouts/blog/baseof.html?plain=1>
 [community/list.html]:
   <{{% param github_repo %}}/blob/main/layouts/community/list.html?plain=1>
+[docs/baseof.html]:
+  <{{% param github_repo %}}/blob/main/layouts/docs/baseof.html?plain=1>
+[swagger/baseof.html]:
+  <{{% param github_repo %}}/blob/main/layouts/swagger/baseof.html?plain=1>
 
-</details>
 </section>
+</details>
 
 ## What's next?
 
diff --git a/docsy.dev/content/en/blog/_index.md b/docsy.dev/content/en/blog/_index.md
@@ -9,9 +9,4 @@ cascade:
     NEW: <i class="fa-regular fa-square-check fa-lg text-success px-1"></i>
     CLEANUP:
       <i class="fa-regular fa-wand-magic-sparkles fa-lg text-info px-1"></i>
-    FA: <i class="fa-{1} fa-{2} text-{3} px-1"></i>
-    FAS: <i class="fa-solid fa-{1} text-{2} px-1"></i>
-    FAS_LG: <i class="fa-solid fa-{1} text-{2} fa-lg"></i>
-    # Badge usage: {{% _param BADGE text color %}}
-    BADGE: <span class="badge text-bg-{2} rounded-pill text-small">{1}</span>
 ---
diff --git a/docsy.dev/content/en/docs/content/lookandfeel.md b/docsy.dev/content/en/docs/content/lookandfeel.md
@@ -9,7 +9,7 @@ params:
     light/dark mode menu <span class='badge text-bg-warning fs-6
     float-end'>EXPERIMENTAL</span>
 # prettier-ignore
-cSpell:ignore: anotherclass autoprefixing baseof docsy lightdark monokai myclass onedark rgba wordmark FOUC
+cSpell:ignore: anotherclass autoprefixing docsy lightdark monokai myclass onedark rgba wordmark FOUC
 ---
 
 By default, a site using Docsy has the theme's default fonts, colors, and
@@ -100,7 +100,9 @@ and filename as the Docsy file you want to reset.
 After resetting selected internal SCSS files, define your project’s actual
 styles in `_styles_project.scss`, as usual.
 
-#### Extra styles (EXPERIMENTAL) {#extra-styles}
+#### Extra styles {#extra-styles}
+
+{{%_param BADGE EXPERIMENTAL info %}}
 
 Docsy includes an optional [td/extra][] styles folder with [experimental] styles
 that projects can test. These styles may eventually be merged into the core
@@ -564,7 +566,7 @@ except that the navbar is fixed to the top of the viewport.
 
 ##### Translucent over cover images {#default-over-cover}
 
-In addition, on desktop, when a page contains a [blocks/cover] (typically used
+In addition, on desktop, when a page contains a [blocks/cover][] (typically used
 for hero images on the home page), Docsy makes the navbar translucent while the
 cover is visible by adding the classes `td-navbar-cover td-navbar-transparent`
 to the navbar. For an example, see the [About Docsy][] page. This initial
@@ -579,8 +581,15 @@ user has scrolled past the cover (hero image), the navbar reverts to its default
 
 #### Navbar height {#navbar-height}
 
-To adjust the navbar height, override the SCSS variable `$td-navbar-min-height`
-in your [project's variables file](#project-style-files).
+{{%_param BADGE EXPERIMENTAL info %}}
+
+To adjust the navbar height, override one or both of the [experimental][] SCSS
+variables `$td-navbar-min-height` and `$td-navbar__main-min-height-mobile` in
+your [project's variables file](#project-style-files).
+
+The min height on mobile is the sum of `$td-navbar-min-height` and
+`$td-navbar__main-min-height-mobile`, on desktop it is just
+`$td-navbar-min-height`.
 
 #### Background color/opacity {#navbar-background}
 
@@ -858,7 +867,9 @@ Both [head.html] and [scripts.html] are included from [baseof.html], Docsy's
 [scripts.html]:
   https://github.com/google/docsy/blob/main/layouts/_partials/head.html
 
-### Adding a banner before page content (EXPERIMENTAL) {#before-page-content}
+### Adding a banner before page content {#before-page-content}
+
+{{%_param BADGE EXPERIMENTAL info %}}
 
 To have a banner or other similar content appear at the top of the pages in a
 section, add the relevant HTML to a [_td-content-after-header.html] file in the
diff --git a/docsy.dev/content/en/docs/get-started/_index.md b/docsy.dev/content/en/docs/get-started/_index.md
@@ -1,12 +1,11 @@
 ---
 title: Get started
-weight: 2
-aliases: [getting-started]
-date: 2018-07-30
-description:
+description: >-
   Learn how to get started with Docsy, including the available options for
   installing and using the Docsy theme.
-sidebar_root_for: self
+date: 2018-07-30
+aliases: [getting-started]
+weight: 2
 ---
 
 As you saw in our introduction, Docsy is a [Hugo](https://gohugo.io) theme,
diff --git a/docsy.dev/hugo.yaml b/docsy.dev/hugo.yaml
@@ -143,19 +143,15 @@ params:
   drawio:
     enable: true
   # UG helpers: use with _param
+  FA: <i class="fa-{1} fa-{2} text-{3} px-1"></i>
+  FAS: <i class="fa-solid fa-{1} text-{2} px-1"></i>
+  FAS_LG: <i class="fa-solid fa-{1} text-{2} fa-lg"></i>
+  # Badge usage: {{% _param BADGE text color %}}
+  BADGE: <span class="badge text-bg-{2} rounded-pill text-small">{1}</span>
   btn-lg: class="btn btn-lg btn-{1}" role="button"
 
 baseURL: *productionURL
 
-menu:
-  main:
-    - name: Example Site
-      weight: 40
-      url: *exampleSiteURL
-      post:
-        <sup><i class="ps-1 fa-solid fa-up-right-from-square fa-xs"
-        aria-hidden="true"></i></sup>
-
 taxonomies:
   tag: tags
   category: categories
diff --git a/docsy.dev/static/refcache.json b/docsy.dev/static/refcache.json
diff --git a/layouts/_partials/navbar.html b/layouts/_partials/navbar.html
diff --git a/layouts/community/list.html b/layouts/community/list.html
diff --git a/package.json b/package.json
diff --git a/tasks/0.15/sticky-navbar-migration.plan.md b/tasks/0.15/sticky-navbar-migration.plan.md

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@`
`9`	`9`	`@include media-breakpoint-down(lg) {`
`10`	`10`	`.td-navbar-nav-scroll {`
`11`	`11`	`max-width: 100%;`
`12`		`- height: 2.5rem;`
	`12`	`+ min-height: $td-navbar__main-min-height-mobile;`
`13`	`13`	`overflow: hidden;`
`14`	`14`	`font-size: 0.9rem;`
`15`	`15`	`}`
Original file line number	Diff line number	Diff line change
`@@ -45,3 +45,4 @@ $td-block-space-bottom-base: 4 * $spacer !default;`
`45`	`45`
`46`	`46`	`$td-navbar-bg-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !default;`
`47`	`47`	`$td-navbar-min-height: 4rem !default;`
	`48`	`+$td-navbar__main-min-height-mobile: 2.5rem !default;`
Original file line number	Diff line number	Diff line change
`@@ -30,6 +30,10 @@`
`30`	`30`	`.nav-link {`
`31`	`31`	`--bs-nav-link-color: initial;`
`32`	`32`	`}`
	`33`	`+`
	`34`	`+ .td-search {`
	`35`	`+ color: initial;`
	`36`	`+ }`
`33`	`37`	`}`
`34`	`38`	`}`
`35`	`39`	`}`