Repository navigation
Announcement bar covers the floating colour scheme toggle on a website with no navbar #15294
Description
I have:
- searched the issue tracker for similar issues
- installed the latest version of Quarto CLI
- formatted my issue following the Bug Reports guide
Bug description
On a website with an announcement, a page that ends up with no navbar and no sidebar gets the colour scheme toggle floated at the top right.
The announcement bar is drawn over it, so the toggle can't be seen or clicked until the bar is dismissed.
A common way to get there is a site that uses a sidebar instead of a navbar (navbar: false), with a page that turns the sidebar off (sidebar: false), such as a custom 404 page or a landing page.
The toggle uses .top-right { position: absolute; top: 1em; right: 1em; }, which is measured from the top of the document.
The bar sits in header#quarto-header.fixed-top, which starts at the same place.
quarto-nav.js adds a top padding to <body> for that header, but the toggle doesn't take it into account.
Related: #14838 (the same toggle is last in the focus order).
Steps to reproduce
_quarto.yml:
project:
type: website
website:
title: T
navbar: false
sidebar:
style: docked
contents:
- index.qmd
announcement:
content: "Version 2.0 is out."
dismissable: true
format:
html:
theme:
light: cosmo
dark: darklyindex.qmd:
---
title: Hello
---
Hello.404.qmd:
---
title: Page not found
sidebar: false
---
The page you are looking for does not exist.Run quarto render, serve _site/ over HTTP (the 404 page links its resources from the site root), then open /404.html at 1400x900.
On index.html, the toggle sits in the sidebar and works.
Actual behavior
The toggle's box is at y=17, inside the bar, which is 38px tall.
document.elementFromPoint() at the toggle's centre returns #quarto-announcement, so a click there never reaches the toggle.
Once the bar is dismissed, the toggle shows up and works.
Expected behavior
The toggle sits 1em below the bar while the bar is showing, and moves back up with the page once the bar is dismissed.
Your environment
- OS: macOS 27.2.
- Browser: Chromium (Playwright).
Quarto check output
Quarto 99.9.9
[✓] Checking environment information...
[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.10.0: OK
Dart Sass version 1.107.1: OK
Deno version 2.9.8: OK
Typst version 0.15.1: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 99.9.9
commit: 089ba530b3ed4ec156a355d41b6b7de2db3e44ea
Activity
mcanouil commentedon Nov 4, 2026
A possible fix, in two parts.
In
quarto-html-after-body.ejs, insert the toggle's container right after the fixed header, or at the start of<body>when there is no header, instead of appending it to the end:quarto-cli/src/resources/formats/html/templates/quarto-html-after-body.ejs
Line 58 in 089ba53
The container stays a direct child of
<body>, so nothing captures its containing block.Then, in
_quarto-rules.scss, place the floating toggle from where its container sits in the page flow, rather than from the top of the document:quarto-cli/src/resources/formats/html/_quarto-rules.scss
Lines 3 to 7 in 089ba53
With
top: auto, the toggle starts just below the body padding thatquarto-nav.jssets for the fixed header, so it sits 1em below the bar.Once the bar is dismissed, the padding drops to 0 and the toggle is back at 1em from the top.
Scoping the rule to the toggle leaves any other
.top-rightuse alone.The first part also fixes #14838, because the toggle then comes right after the bar's dismiss button in the focus order.
I tried both parts on the reproduction above, added through
include-after-body, in Chromium at 1400x900.With the bar showing, the toggle moves from y=17 to y=55, and a click at its centre now reaches it.
Once the bar is dismissed, it is back at y=17.