Change horizontal placement of logo & title in website navbar

[kelly-sovacool]

Description

By default, the website title and logo are placed on the left side of the navbar.

_quarto.yml

project:
  type: website

website:
  title: "Website title"
  navbar:
    logo: logo.png
    left:
      - href: index.qmd
        text: Home
format:
  html:
    theme: cosmo
    css: styles.css

Is it possible to customize the horizontal placement so that they are aligned to the center of the navbar?

(This discussion is similar but did not provide a reprex)

[mcanouil]

Not easily, you likely need CSS or even JavaScript to modify the structure of the nav bar ara.
Currently the navbar occupies the whole space and its content can be right or left aligned, using the corresponding YAML key.

The "brand" container takes only the space it needs.

Even outside of Quarto, this is not a simple design choice, because if you want to have the "brand" centered, what should happen to the navbar if there is no space left for it? Collapse? But you don't want to collapse all the time if you have a long navbar.

---

Here is a quick example to centre-ish the title when the navbar is collapsed:

.navbar .navbar-container>.navbar-brand-container {
  margin-left: auto !important;
  margin-right: auto !important;
}