Quarto网站导航栏菜单隐藏于屏幕外，如何使其显示在右侧？

方法一：修改配置文件直接设置位置 #

在项目根目录的_quarto.yml中，找到website.navbar配置块，添加position: right参数，同时确保菜单项布局设置正确：

website:
  navbar:
    position: right
    items:
      - text: 首页
        href: index.qmd
      - text: 关于
        href: about.qmd
      - text: 文档
        href: docs.qmd

该方法适配Quarto默认Bootstrap主题，配置后导航栏菜单会直接显示在页面右侧。

方法二：自定义CSS强制调整（配置不生效时使用） #

如果配置方法未达到预期效果，可通过自定义CSS修改导航栏布局：

1. 在项目根目录创建custom.css文件，添加以下样式：

/* 让导航栏内容靠右对齐 */
.navbar-collapse {
  justify-content: flex-end !important;
}

/* 移动端汉堡按钮同步靠右显示 */
.navbar-toggler {
  margin-left: auto;
}

2. 在_quarto.yml中引入该CSS文件：

website:
  stylesheets:
    - custom.css

若使用非默认主题，可通过浏览器开发者工具（F12）查看导航栏对应的CSS类名，替换上述选择器即可适配。

内容的提问来源于stack exchange，提问作者Alejandro Molina Moctezuma