Quarto网站导航栏定制：修改_quarto.yml与styles.css

需求说明 #

• 蓝色导航栏（背景色#1A3D7C）：
  • 左侧：☰汉堡菜单（点击展开指定菜单） + Logo（顺序为汉堡菜单在前，Logo在后）
  • 右侧：白色LinkedIn、WhatsApp、YouTube图标
• 汉堡菜单展开后包含：「About Me」「Research」「Publications」「Teaching」「Blog」「Contact」
• 网站其余内容保持不变

调整后的_quarto.yml配置文件 #

project:
  type: website

website:
  title: ""   # 不显示站点标题文本
  navbar:
    background: "#1A3D7C"
    collapse-below: xl   # 强制宽屏也显示汉堡菜单
    left:
      - text: ""         # 仅显示汉堡图标，无附加文字
        menu:
          - text: "About Me"
            href: about.html
          - text: "Research"
            href: research.html
          - text: "Publications"
            href: publications.html
          - text: "Teaching"
            href: teaching.html
          - text: "Blog"
            href: posts/
          - text: "Contact"
            href: contact.html
      - icon: images/logo.png  # 将Logo作为左侧项目，放在汉堡菜单之后
        href: index.html  # 点击Logo跳转回首页
    right:
      - icon: linkedin
        href: https://www.linkedin.com/in/jamesdan
      - text: "WhatsApp"   # 通过CSS替换为SVG图标
        href: https://wa.me/2348033147591
      - icon: youtube
        href: https://www.youtube.com/@TheRWay-m6s

format:
  html:
    theme: cosmo
    css: styles.css
    toc: false

调整后的styles.css样式文件 #

/* CSS样式定义 */

/* 隐藏汉堡菜单默认的"MENU"文本，仅保留图标 */
.navbar-toggler-icon::after {
  content: "";
}

/* 调整导航栏Logo的显示尺寸 */
.navbar-nav .nav-item img {
  max-height: 40px;  /* 可根据需求自行调整大小 */
  width: auto;
}

/* 将WhatsApp文本替换为白色图标，统一导航栏图标风格 */
.navbar a[href*="wa.me"] {
  font-size: 0; /* 隐藏原文本内容 */
}

.navbar a[href*="wa.me"]::before {
  content: url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/whatsapp.svg');
  display: inline-block;
  height: 22px;
  width: 22px;
  vertical-align: middle;
  filter: brightness(0) invert(1); /* 强制图标显示为白色 */
}

关键修改说明 #

1. 汉堡菜单与Logo顺序：把原全局logo参数改为左侧导航项，确保汉堡菜单显示在Logo之前
2. 汉堡菜单优化：清空汉堡图标后的默认文本，仅保留☰符号
3. Logo样式适配：调整选择器匹配新位置的Logo，控制显示尺寸
4. WhatsApp图标统一：通过CSS替换文本为白色SVG图标，与其他平台图标视觉保持一致

内容的提问来源于stack exchange，提问作者Daniel James