How to change the navbar color of a Quarto website using brand.yml?

Question

I am writing a website using Quarto. My _quarto.yml file is as follows:

project:
  type: website
  output-dir: docs
  
website:
  title: "Saïd Maanan"
  page-footer: 
    left: "Copyright © 2023-2025 Saïd Maanan"
    right: "This website is built with [Quarto](https://quarto.org/)."
  page-navigation: true
  back-to-top-navigation: true
  navbar:
    search: false
    left:
      - href: index.qmd
        text: "About Me"
        icon: file-earmark-person
      - href: research.qmd
        text: "Research"
        icon: pc-display-horizontal
      - href: publications.qmd
        text: "Publications"
        icon: file-earmark-pdf
      - href: teaching/teaching.qmd
        text: "Teaching"
        icon: person-video3
      - href: blog.qmd
        text: "Blog"
        icon: pencil-square
  cookie-consent: true

format:
  html:
    theme: 
      light: flatly
      dark: darkly
    lang: en
    date-format: 'dddd MMMM YYYY'
    email-obfuscation: javascript
    link-external-newwindow: true
    css: styles.css
    toc: true
    page-layout: full

editor: source

lightbox: auto

I also use the following _brand.yml file to add styling elements to my website:

meta:
  name: "Saïd Maanan"
  link:
    home: https://smaanan.github.io
    github: https://github.com/smaanan
color:
  palette:
    green: "#595F39"
    black: "#1B1B1B"
    gray: "#58594A"
    white: "#E4E4DE"
  foreground: black
  background: white
  primary: green
  secondary: gray
typography:
  fonts:
    - family: Fjalla One
      source: google
    - family: Inter
      source: google
    - family: Space Mono
      source: google
  base:
    family: Inter
    line-height: 1.6
  headings:
    family: Fjalla One
    weight: 600
    color: green
  link:
    color: secondary
    weight: 500
  monospace:
    family: Space Mono
    size: 1em
defaults:
  bootstrap:
    # bootstrap variable definitions
  quarto:
    format:
      # basic format-specific settings
      html:
        title-block-banner: green
        title-block-banner-color: white
      revealjs:
  shiny:
    # shiny specific settings

The rendered webpage wrongly gives two menu bars instead of one, as in the image below:

This is not the result I wanted, I wanted to have one menu bar, but to be styled in white and green as is the banner.

How the achieve this and fix the problem?

Answer 1

Using

html:
  title-block-banner: green
  title-block-banner-color: white

within the _brand.yml activates a Title Banner. This has to be removed.

Instead, you need to override Sass variables. Within the Navigation section of the Quarto documentation the variables are listed, e.g. $navbar-bg corresponds to the background color of the navbar. These variables can be customized using SCSS files. Another possibility, as also used in your example, is using brand.yml. Within the _brand.yml, one can e.g. add

defaults:
  bootstrap:
    defaults:
      navbar-bg: green
      navbar-fg: white
      navbar-hl: black

(see also the defaults section on the brand.yml docs). This would define a green background with a white font color and the active tab's font color is black.