Website navbar logo is clipped when the navbar is crowded

Open Beginner friendly
  • Is something wrong?
#15,255 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
scss
Domain
frontend

Research direction

The clipping comes from the .navbar-brand rule in src/resources/projects/website/navigation/quarto-nav.scss, which sets overflow hidden and lets the logo link shrink as a flex item inside .navbar-brand-container. Start with the existing .navbar-brand.navbar-brand-logo block in that file. Render the reproduction project and measure the logo link width at about 1024px to confirm the bug. Done when the logo keeps its full width across the crowded range while the title still truncates with an ellipsis.

Written by the indexing model from the issue text.

Description

enhancement websites
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 a navbar logo, a title, and enough navbar items to fill the expanded navbar, the logo gets clipped from the right.
It happens at viewport widths just above the lg breakpoint, where the navbar is expanded but crowded.
The title truncates with an ellipsis as intended, but the logo link shrinks too, and overflow: hidden cuts off part of the image.

The cause is in src/resources/projects/website/navigation/quarto-nav.scss.
The logo and the title are both a.navbar-brand flex items inside .navbar-brand-container (display: flex), and every .navbar-brand gets overflow: hidden:

.navbar-brand {
  overflow: hidden;
  text-overflow: ellipsis;
}

overflow: hidden lets a flex item shrink below its content width, so both links shrink when space runs out.
That's what lets the title truncate, but it does the same to the logo link.
The rules are unchanged on main and at v1.12.0.

Steps to reproduce

  1. Create a website project with these three files:

    _quarto.yml:

    project:
  type: website

website:
  title: "Example Project Documentation"
  navbar:
    logo: logo.svg
    left:
      - text: "Home"
        href: index.qmd
      - text: "Getting Started"
        href: index.qmd
      - text: "User Guide"
        href: index.qmd
      - text: "How-to Guides"
        href: index.qmd
      - text: "Examples"
        href: index.qmd
      - text: "API Reference"
        href: index.qmd
      - text: "Release Notes"
        href: index.qmd
      - text: "Contributing"
        href: index.qmd

format: html

    index.qmd:

    ---
title: "Home"
---

Resize the browser window to about 1000px wide and look at the logo in the navbar.

    logo.svg (two circles, so clipping is easy to see):

    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="24" viewBox="0 0 48 24"><circle cx="12" cy="12" r="11" fill="#1f77b4"/><circle cx="36" cy="12" r="11" fill="#ff7f0e"/></svg>

  2. Run quarto render.

  3. Open _site/index.html in a browser at a viewport width of about 1024px.

Actual behavior

The logo is clipped: most of the orange circle is missing.

Image

Measured width of the logo link versus its 52px image:

Viewport Logo link width
1020px 34px
1100px 40px
1220px 45px
1340px 50px
1380px and wider 52px (not clipped)

With a longer title or more navbar items, the logo link can shrink to 0px and disappear entirely.

Expected behavior

The logo keeps its full size, and only the title shrinks and truncates with an ellipsis.

Image

Adding one rule fixes it, and works today as a workaround in a project stylesheet:

.navbar-brand.navbar-brand-logo {
  flex-shrink: 0;
}

In quarto-nav.scss, that would be flex-shrink: 0; in the existing .navbar-brand.navbar-brand-logo block.
With it, the logo link stays at the full 52px at every width from 980px to 1600px.

Your environment
  • IDE: none (rendered from the terminal)
  • OS: macOS 27.0.1
  • Browser: Google Chrome 156.0.8078.74

Also reproduced with Quarto 1.11.7.

Quarto check output
Quarto 1.9.37
[✓] Checking environment information...
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.8.3: OK
      Dart Sass version 1.87.0: OK
      Deno version 2.4.5: OK
      Typst version 0.14.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.9.37
      Path: /Applications/quarto/bin
Dominant language
JavaScript
Stars
6.1k
Forks
478
Avg merge
17h 26m
Merged PRs (30d)
126

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from quarto-dev/quarto-cli

All issues in quarto-dev/quarto-cli

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.