求助：在shinydashboard页眉添加logo后切换按钮消失

问题说明 #

尝试在shinydashboard页眉的切换按钮旁添加logo，但添加后切换按钮完全无法显示，期望实现的效果如下：

原代码核心问题：

• 给logo设置了left: -5rem的相对定位，同时给切换按钮添加了left: -23rem的绝对定位，直接将按钮移出可视区域
• 页眉元素布局未合理规划，导致元素错位或遮挡

修改后的完整代码 #

## app.R ##
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

ui <- dashboardPage(
  dashboardHeader(
    # 调整logo布局，避免挤压切换按钮
    title = div(
      a(href = "#Home",
        img(src = "namuda_icon.PNG", height = "25px", 
            style = "position: relative; top: -5px; margin-right: 10px;")
      ),
      id = "home_logo"
    ),
    controlbarIcon = shiny::icon("filter")
    
  ),
  dashboardSidebar(
    collapsed = TRUE
  ),
  dashboardBody(
    tags$head(tags$style(HTML('
        /* logo区域样式 */
        .skin-blue .main-header .logo {
          background-color: white;
        }

        /* logo hover样式 */
        .skin-blue .main-header .logo:hover {
          background-color: white;
        }

        /* 导航栏整体样式 */
        .skin-blue .main-header .navbar {
          background-color: white;
        }  
                               
        /* 页面主体背景 */
        .content-wrapper, .right-side {
          background-color: white;
        }

        /* 侧边栏背景 */
        .skin-blue .main-sidebar {
          background-color: snow;
        }
        
        /* 切换按钮默认样式 */                     
        .skin-blue .main-header .navbar .sidebar-toggle {
          background-color: black;
        }
        
        /* 切换按钮hover样式 */                     
        .skin-blue .main-header .navbar .sidebar-toggle:hover {
          background-color: black;
        }
                              
                               '))),
    # 移除导致切换按钮消失的错误定位样式
    tags$style(type="text/css",".skin-white .main-header .logo, .skin-blue .main-header .logo, .skin-blue .main-header .logo:hover{
    background-color: white;}")
  ),
  
  controlbar = dashboardControlbar(id = "dashboardControlbarID", collapsed = TRUE, skin = "black", icon = icon("filter"))
)

server <- function(input, output) {}

shinyApp(ui, server)

关键修改点 #

• 移除切换按钮的position: absolute; left: -23rem;样式，恢复按钮默认显示位置
• 将logo的left: -5rem改为margin-right: 10px，避免过度左移挤压切换按钮
• 优化标题区域的div结构，确保元素布局逻辑清晰

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