R flexdashboard小屏幕下navbar换行遮挡主内容顶部如何解决

下面提供3种无需删除导航栏项目的适配方案，可根据你的需求选择：

方案1：启用导航栏自动折叠（最简便） #

flexdashboard原生支持小屏幕下将多余导航项折叠为汉堡菜单，仅需修改YAML配置即可：

---
title: "Example long title"
output: 
  flexdashboard::flex_dashboard:
    collapse_navbar: true # 新增这一行配置
---

开启后小屏幕下仅显示标题和汉堡按钮，点击按钮才会展开所有导航项，完全不会出现多行导航栏遮挡内容的问题。
如果提示参数不识别，可先升级flexdashboard到最新版本：install.packages("flexdashboard")

方案2：添加响应式CSS手动适配 #

如果不想使用折叠菜单，可通过CSS给body添加顶部内边距避开导航栏：
在你的Rmd文档任意位置添加以下CSS代码块：

/* 适配不同屏幕宽度的导航栏高度 */
body {
  padding-top: 70px !important; /* 适配大屏幕单行导航栏 */
}
@media (max-width: 768px) {
  body {
    padding-top: 120px !important; /* 适配小屏幕两行导航栏，可根据实际标题长度调整数值 */
  }
}
/* 如果导航栏可能折为3行，可新增更小屏幕的媒体查询 */
@media (max-width: 500px) {
  body {
    padding-top: 170px !important;
  }
}

方案3：JS动态适配（通用性最强） #

如果导航栏长度不固定，可通过JS自动计算导航栏高度，动态调整body的顶部内边距，无需手动设置断点：
在Rmd文档任意位置添加以下JS代码块：

function adjustNavbarPadding() {
  const navHeight = document.querySelector('.navbar').offsetHeight;
  document.body.style.paddingTop = `${navHeight + 10}px`;
}
// 页面加载和窗口尺寸变化时自动调整
window.addEventListener('load', adjustNavbarPadding);
window.addEventListener('resize', adjustNavbarPadding);

这个方案会自动适配任意行数的导航栏，无需手动调整数值。

内容的提问来源于stack exchange，提问作者Paul PR