Search code examples
cssrshinyborderdashboard

Remove border lines in R shiny dashboard's main header


I'm very new to R Shiny, so I appreciate any help. I'm looking to remove the border lines from the main header of my shiny dashboard. I can't figure out the CSS. Here's a simplified version of my dashboard. Border lines I want to remove are in the screenshot attached.screenshot of shiny dashboard

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  
  skin = "black",
  
  dashboardHeader(
    tags$li(class = "dropdown",
            tags$style(".main-header {max-height: 75px}",
                       ".main-header .logo {height: 75px}",
                       # ".skin-black .main-header .navbar {background-color: #46963D}",
                       # ".skin-black .main-header .logo {background-color: #46963D}",
                       # active selected tab in the sidebarmenu
                       ".main-sidebar .sidebar .sidebar-menu .active a{
                           background-color: #003A68;
                         }",
                       #other links in the sidebarmenu when hovered
                       # ".main-sidebar .sidebar .sidebar-menu a:hover{
                       #     background-color: #005BA5;
                       #   }",
                       # ".main-sidebar .sidebar .sidebar-menu {
                       #     background-color: #005BA5;
                       #   }",
                       ".main-sidebar .sidebar{
                           background-color: #005BA5;
                         }",
                       # toggle button when hovered                   
                       # ".main-header .navbar .sidebar-toggle:active{
                       #   max-height: 100px
                       # }"
                       # ".skin-black .main-header .navbar {background-color: #46963D}"
            )
    ),
    
    titleWidth = 350,
    title = tags$a(tags$image(src = "Gilbert Logo.png"))),

  dashboardSidebar(
    width = 350,
    sidebarMenu(id = "tab",
               
                div(class = "inlay", style = "height:25px;width:100%;background-color: #ecf0f5;"),
                menuItem("Inputs", icon = icon("sliders-h")))
  ),

  dashboardBody() 
)

server <- function(input, output) {}

shinyApp(ui = ui, server = server)

Solution

  • Following Customizing dashboard apperance you could remove the border for you logo and the sidebar toggle like so:

    library(shiny)
    library(shinydashboard)
    
    ui <- dashboardPage(
      skin = "black",
      dashboardHeader(
        tags$li(
          class = "dropdown",
          tags$style(
            ".main-header {max-height: 75px}",
            ".main-header .logo {height: 75px}",
            ".main-sidebar .sidebar .sidebar-menu .active a{
                               background-color: #003A68;
                             }",
            ".main-sidebar .sidebar{
                               background-color: #005BA5;
                             }",
          )
        ),
        titleWidth = 350,
        title = tags$a(tags$image(src = "Gilbert Logo.png"))
      ),
      dashboardSidebar(
        width = 350,
        sidebarMenu(
          id = "tab",
          div(class = "inlay", style = "height:25px;width:100%;background-color: #ecf0f5"),
          menuItem("Inputs", icon = icon("sliders-h"))
        )
      ),
      dashboardBody(
        tags$head(tags$style(HTML('
          .skin-black .main-header>.logo {
            border-right: 0px;
          }
        ', 
        '.skin-black .main-header .navbar>.sidebar-toggle {
            border-right: 0px;
        }')))
        
      )
    )
    
    server <- function(input, output) {}
    
    shinyApp(ui = ui, server = server)
    

    enter image description here