使用固定导航栏时如何避免遮盖主体内容？

你遇到的问题根源在于：bslib::page_navbar会将页面内容包裹在独立的.bslib-page-content容器中，而非直接放在body标签下，因此直接给body设置padding-top无法作用到实际内容区域。以下是两种可靠的解决方案：

方法一：针对内容容器设置固定内边距 #

使用CSS相邻兄弟选择器，精准给固定导航栏后的内容容器添加内边距：

library(bslib)
library(shiny)
library(lorem)

ui <- bslib::page_navbar(
    theme=bslib::bs_theme(version=5), 
    title="Fixed Navbar Demo",
    position="fixed-top",
    # 给导航栏后的内容容器加内边距，数值可根据导航栏高度调整
    shiny::tags$style(type="text/css", ".fixed-top + .bslib-page-content {padding-top: 70px;}"),
    bslib::nav_panel(
        "Menu Entry",
        shiny::h2("Content"),
        lorem::ipsum(paragraphs=10)
    )
)
server <- function(input, output, session) {}
shiny::shinyApp(ui, server)

方法二：用CSS变量动态适配导航栏高度 #

如果导航栏高度可能变化（比如标题换行、添加下拉菜单），可以利用Bootstrap内置的CSS变量--bs-navbar-height动态计算内边距，无需手动固定数值：

library(bslib)
library(shiny)
library(lorem)

ui <- bslib::page_navbar(
    theme=bslib::bs_theme(version=5) |>
      bs_add_rules("
        .fixed-top + .bslib-page-content {
          padding-top: calc(var(--bs-navbar-height) + 10px);
        }
      "), 
    title="Fixed Navbar Demo",
    position="fixed-top",
    bslib::nav_panel(
        "Menu Entry",
        shiny::h2("Content"),
        lorem::ipsum(paragraphs=10)
    )
)
server <- function(input, output, session) {}
shiny::shinyApp(ui, server)

其中+10px是额外的缓冲间距，可根据视觉需求调整。

补充说明 #

你之前给h2加内边距只是临时规避方案，仅适用于页面顶部有标题的场景；而直接给body设置样式无效，是因为bslib的内容容器会隔绝body的padding设置。

内容的提问来源于stack exchange，提问作者Karsten W.