在闪亮的仪表板中将徽标移动到仪表板标题的左侧答案

【问题标题】：Move logo to the left side of dashboard header in shiny dashboard在闪亮的仪表板中将徽标移动到仪表板标题的左侧
【发布时间】：2020-07-06 17:12:08
【问题描述】：

我有一个闪亮的仪表板，标题右侧带有公司徽标，但我想将其移到左侧。这是我的尝试（将您的徽标放入您的应用程序目录的 www 子目录中）。因为dashboardHeader() 需要一个li 类型的标签元素和下拉类，我们可以传递这些元素而不是dropdownMenus。我还需要标题中的文本正常可见。

library(shiny)
library(shinydashboard)

dbHeader <- dashboardHeader(title = "My Dashboard",

                            tags$li(a(href = 'http://www.company.com',
                                      img(src = 'company_logo.png',
                                          title = "Company Home", height = "30px"),
                                      style = "padding-top:10px; padding-bottom:10px;"),
                                    class = "dropdown"))

server <- function(input, output) {}

shinyApp(
  ui = dashboardPage(
    dbHeader,
    dashboardSidebar(),
    dashboardBody(
      tags$head(tags$style(HTML(
        '.myClass { 
        font-size: 20px;
        line-height: 50px;
        text-align: left;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        padding: 0 625px;
        overflow: hidden;
        color: white;
      }
    '))),
      tags$script(HTML('
      $(document).ready(function() {
        $("header").find("nav").append(\'<span class="myClass"> ABCD Hypothesis Generation Model </span>\');
      })
     '))
    )
  ),
  server = server
)

【问题讨论】：

标签： r shiny shinydashboard

【解决方案1】：

您要移动的项目是类为 .navbar-custom-menu 的 div。
将此添加到 tags$head(tags$style(HTML(...))) 中的自定义 css 以强制它向左浮动：

.navbar-custom-menu {
       float: left!important;
}

!important 是必要的，以防止它被其他地方的 css 覆盖。

【讨论】：