How to fix the title banner to the top of page

[kbzsl]

I am looking for a solution to fix the title banner to the top of the rendered html page, while the rest of the page remains scrollable.

I tried to add some html tags, but it's not working as desired. And I don't have the required html/css knowledge to solve it.

#title-block-header {
  margin-block-end: 1rem;
  position: fixed;
  height: 75px;
}

By the way, do you know any place (user guide, blogpost) where some commonly used style definitions are presented? Like: size/position changes, renaming items (e.g. PUBLISHED) or removing

[scottyd22]

Below is an example rmarkdown html page that fixes the title while scrolling. Since the fixed header has a set height of 75px, the "Start content here" line has a top margin set to 75px so it doesn't get covered.

As for references, I've found https://www.w3schools.com/css/ to come in handy.

Note: the code chunk in the rmarkdown below was shortened to two tick marks `` in order to render in one block here. If you copy and paste this into an rmarkdown document, be sure to add the third tick marks.

---
title: "My Title"
output: html_document
---

``{css formatting, echo=FALSE}

#header {
    position: fixed;
    width: 100%;
    height: 75px;
    background-color: white;
}
``

<h3 style="margin-top: 75px;"> Start content here</h3>
`r rep('Content...<br>', 100)`

[cderv]

@kbzsl

I am looking for a solution to fix the title banner to the top of the rendered html page, while the rest of the page remains scrollable.

I register a feature request for making that more easy if possible

[FR] Allow a configuration to make the navbar sticky in Quarto website

[cderv]

In fact I missed the pinned configuration

pinned: Always show the navbar (true or false). Defaults to false, and uses headroom.js to automatically show the navbar when the user scrolls up on the page.

See Quarto - Website Navigation

But this is for navbar and I misunderstood - I see that now. Using CSS is definitely a good way.