Single page partially obscured by navbar

[d5UtQvp8QQU9]

Environment

• Version of Docsy you are using: 0.11.0

• How are you using Docsy? As a:

  • Hugo module
  • NPM module
  • Git submodule
  • Other:

• Version of Hugo you are using (output of hugo version):
  hugo v0.139.2-770f548b47b39e6f0fd4da1cc80552024e5829e1+extended windows/amd64 BuildDate=2024-11-23T15:33:51Z VendorInfo=gohugoio

• OS:

  • Linux
  • macOS
  • Windows
  • Other:

• Browser: Microsoft Edge 129.0.2792.89

Problem

If I create a single page document, e.g. content/en/test/test.md with the following content:

---
title: Test
menu: {main}
---

Some of

these lines

of text

will be hidden.

Then the first two lines will be hidden behind the header (not scrollable):

If I make the viewport less wide the problem goes away, but now there is a scrollbar that does not want to go away, no matter how tall the viewport gets:

Tested with docsy-example-0.11.0, I post this issue here because I don't think it is related to the example-project.
Updating hugo has no effect.

In contrast with other pages like docs, class td-main will not have a padding-top property.
Setting padding-top: 5.5rem to td-main fixes the issue,
The padding-top for other pages comes from _main-container.scss:

.td-404 main,
.td-main main {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  @include media-breakpoint-up(md) {
    padding-top: 5.5rem;
  }
}

It looks like media-breakpoint-up(md) is not included for single page templates but I don't know how to fix this.

[d5UtQvp8QQU9]

So after digging into the workings of bootstrap and CSS in general I found the following differences:

Below media-breakpoint-up(md) (<768px), the <header>-element has a non-zero height. Above that, the height of the element is zero, my guess is that this is related to the position: fixed property of the <nav>-element from _nav.scss:

.td-navbar {
  [...]
  @include media-breakpoint-up(md) {
    position: fixed;
    [...]
  }
  [...]
}

This gets compensated for normal docs content by setting padding-top: 5.5rem in _main-container.scss (see original post).
This is because the content is inside an element named <main> within a div of class td-main:

For single-page content it doesn't work like this.
The content is inside an element named <main> with class td-main (subtle difference): <main role="main" class="td-main">

I'm not qualified to say what the acutal bug here is

• Should the header-element always have a height?
• Should the scss be fixed or extended?
• Should single page content also generate an element named <main> within a div of class td-main ?

Probably related or duplicate-of: #2130