Website navbar logo is clipped when the navbar is crowded

Ouverte Adaptée aux débutants
  • Quelque chose ne va pas ?
#15,255 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
78/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
scss
Domaine
frontend

Piste de recherche

La troncature provient de la règle .navbar-brand dans src/resources/projects/website/navigation/quarto-nav.scss, qui définit overflow hidden et laisse le lien du logo se réduire en tant qu'élément flex à l'intérieur de .navbar-brand-container. Commence par le bloc existant .navbar-brand.navbar-brand-logo dans ce fichier. Génère le projet de reproduction et mesure la largeur du lien du logo à environ 1024px pour confirmer le bug. C'est terminé lorsque le logo conserve toute sa largeur dans la plage étroite, tandis que le titre est toujours tronqué avec une ellipse.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

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
Langage dominant
JavaScript
Étoiles
6.1k
Forks
478
Merge moyen
17 h 36 min
PR mergées (30 j)
139

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de quarto-dev/quarto-cli

Toutes les issues de quarto-dev/quarto-cli

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.