Shinydashboard增大主Header高度后导航图标旁圆点的成因及解决

• 你把自定义样式的tags$style放在了tags$li(class = "dropdown")标签内部，这个li是导航栏列表（ul）里的一个列表项。
• 浏览器默认的列表样式会为空列表项显示圆点标记，而这个li里只有样式代码没有可见内容，所以圆点就显现出来了。

有两种简单的修复方式：

方法一：移除多余的tags$li包裹 #

直接将样式代码放在dashboardHeader的子元素中，不需要用dropdown类的li包裹：

library(shiny)
library(shinydashboard)

ui <- 
  dashboardPage(
    title = "Test",
    header = dashboardHeader(
      # 直接添加样式，无需li包裹
      tags$style(".main-header {min-height: 75px}"),
      title = a(target="_blank", href = 'https://www.google.com',
                img(src = 'https://img.freepik.com/free-icon/search_318-265146.jpg', title = "Test", height = "75px"))
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody()
  )

server <- function(input, output) {}

shinyApp(ui, server)

方法二：给该li添加隐藏列表样式的规则 #

如果一定要保留li标签，给它加上list-style: none的样式，覆盖默认的列表圆点：

library(shiny)
library(shinydashboard)

ui <- 
  dashboardPage(
    title = "Test",
    header = dashboardHeader(
      tags$li(
        class = "dropdown",
        # 添加隐藏列表圆点的样式规则
        tags$style(".main-header {min-height: 75px} .main-header .dropdown {list-style: none;}")
      ),
      title = a(target="_blank", href = 'https://www.google.com',
                img(src = 'https://img.freepik.com/free-icon/search_318-265146.jpg', title = "Test", height = "75px"))
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody()
  )

server <- function(input, output) {}

shinyApp(ui, server)

内容的提问来源于stack exchange，提问作者H. berg