lennymckenny
lennymckenny

Reputation: 15

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)

Upvotes: 0

Views: 535

Answers (1)

stefan
stefan

Reputation: 123818

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

Upvotes: 2

Related Questions