如何调整shinydashboard标题栏高度并消除侧边栏顶部空白？

1. 让标题栏高度与蓝色栏一致 #

如果是通过fresh包自定义了顶部蓝色栏的高度，直接同步设置标题栏（logo区域）和顶部导航栏的高度即可：

library(fresh)
my_theme <- create_theme(
  adminlte_color(
    light_blue = "#00338D" # 匹配IDB蓝色
  ),
  adminlte_global(
    header_height = "60px", # 设置为你的蓝色栏实际高度
    logo_height = "60px"
  )
)

如果是用自定义CSS实现的蓝色栏，直接添加以下CSS规则覆盖默认样式：

.main-header .logo, .main-header .navbar {
  height: 60px;
  line-height: 60px;
}
.main-header .logo {
  font-size: 18px; /* 可选：避免标题文字因高度调整溢出 */
}

将这段CSS通过tags$style()嵌入Shiny应用：

tags$style(HTML("
  .main-header .logo, .main-header .navbar {
    height: 60px;
    line-height: 60px;
  }
  .main-header .logo {
    font-size: 18px;
  }
"))

2. 消除侧边栏“General”上方的黑色空白 #

这个空白是shinydashboard侧边栏菜单默认的顶部边距导致的，添加CSS规则移除即可：

.sidebar-menu {
  margin-top: 0 !important;
}
/* 若仍有残留空白，调整侧边栏整体内边距 */
.main-sidebar {
  padding-top: 0 !important;
}

同样通过tags$style()加入应用：

tags$style(HTML("
  .sidebar-menu {
    margin-top: 0 !important;
  }
  .main-sidebar {
    padding-top: 0 !important;
  }
"))

完整整合示例 #

把上述调整整合到你的代码中：

library(shiny)
library(shinydashboard)
library(fresh)

ui <- dashboardPage(
  dashboardHeader(title = "Labor Market Discrimination in Ecuador"),
  dashboardSidebar(
    sidebarMenu(
      menuItem("General", tabName = "general")
    )
  ),
  dashboardBody(
    tags$style(HTML("
      /* 统一标题栏与蓝色栏高度 */
      .main-header .logo, .main-header .navbar {
        height: 60px;
        line-height: 60px;
      }
      .main-header .logo {
        font-size: 18px;
      }
      /* 移除侧边栏顶部空白 */
      .sidebar-menu {
        margin-top: 0 !important;
      }
      .main-sidebar {
        padding-top: 0 !important;
      }
    ")),
    tabItems(
      tabItem(tabName = "general", h2("General Content"))
    )
  ),
  theme = create_theme(
    adminlte_color(light_blue = "#00338D"),
    adminlte_global(header_height = "60px")
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

内容的提问来源于stack exchange，提问作者Jorge Paredes