如何在Shiny的page_navbar两侧添加Logo并居中标题？

要实现左侧Logo、中间标题、右侧Logo，且导航项位于标题下方居中的布局，需要自定义page_navbar的内部结构，结合Bootstrap的Flex布局控制元素排列，同时适配移动端显示：

修改后的完整代码 #

library(shiny)

ui <- page_navbar(
  # 自定义导航栏内部结构，替换默认布局
  header = tags$div(class = "container-fluid",
    # 第一行：左侧Logo + 居中标题 + 右侧Logo
    tags$div(class = "d-flex align-items-center justify-content-between py-2",
      tags$img(src = "logo_1.png", height = "57.5px"),
      tags$span(class = "navbar-brand text-white fs-4", "MY TITLE"),
      tags$img(src = "logo_2.png", height = "57.5px")
    ),
    # 第二行：导航面板与菜单，居中排列
    tags$div(class = "navbar-collapse d-flex justify-content-center",
      nav_panel("Intro", page_fillable()),
      nav_panel("Data"),
      nav_menu("Summary",
        nav_panel("Item 1"),
        nav_panel("Item 2"),
        nav_panel("Item 3")
      )
    )
  ),
  bg = "#4F2170",
  # 移动端适配样式
  tags$head(
    tags$style(HTML("
      /* 确保导航栏整体样式统一 */
      .navbar {
        padding: 0;
      }
      /* 移动端适配：固定顶部Logo与标题，导航项下移避免重叠 */
      @media (max-width:992px) {
        .navbar .container-fluid > div:first-child {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          background-color: #4F2170;
          z-index: 1030;
          padding: 0.5rem 1rem;
        }
        .navbar .container-fluid img:first-child {
          position: absolute;
          left: 10%;
          top: 50%;
          transform: translateY(-50%);
        }
        .navbar .container-fluid .navbar-brand {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          margin: 0;
        }
        .navbar .container-fluid img:last-child {
          position: absolute;
          right: 10%;
          top: 50%;
          transform: translateY(-50%);
        }
        .navbar .container-fluid > div:nth-child(2) {
          margin-top: 70px;
        }
      }
    "))
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

关键调整说明 #

1. 结构重构：

   • 将导航栏拆分为两行：第一行实现Logo左右分布、标题居中的布局；第二行负责导航项的居中排列。
   • 借助Bootstrap的d-flex、align-items-center、justify-content-between类实现元素的灵活对齐。

2. 替代JS动态添加：

   • 直接在header参数中插入Logo元素，避免JS加载顺序导致的位置偏差，布局稳定性更强。

3. 移动端适配：

   • 固定顶部Logo与标题栏，防止滚动时移位；调整导航项位置，避免与顶部元素重叠。
   • 使用transform实现元素垂直/水平居中，保证移动端显示效果一致。

内容的提问来源于stack exchange，提问作者Hektor Brasil