How to fix the title banner to the top of page

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

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 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)`


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

1 Like

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.

This topic was automatically closed 45 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.