CODEWITHSUNDEEP
rshinydashboard
krishna
krishna

Reputation: 401

How to change sidebar menuItem("menu1") font color in shinydashboard?

I am trying to change the text color of menuItem() in shinydashboard sidebar, But my code is not working.

sidebar

my code:

library(shinydashboard)

ui <- shinyUI(dashboardPage(
          dashboardHeader(title = "a"),
          dashboardSidebar(
            tags$style(HTML(".sidebar-menu li a { font-size: 100px; }")), 
            
            menuItem("first"),
            menuItem("second")
          ),
          dashboardBody(
            tags$style(HTML(".sidebar-menu li a { font-size: 100px; }")),
            tags$head(tags$style(HTML('
            .skin-blue .sidebar-menu > li.active > a {
            color:#ccff00; background-color:#ffffff
            },
            .skin-black .main-sidebar ELEMENT {
            color: #ffccdd;}
            .skin-blue .sidebar-menu > li:hover > a {font-color : #ffdd00;
              border-left-color: #ff0000 ; background-color:#ffffff;
            }'
                                      ))),
            
            "HI"
            
          )))

server <- shinyServer(function(input,output){

})

shinyApp(ui,server)

Any help on this would be greatly appreciable.

Upvotes: 1

Views: 1192

Answers (1)

Eli Berkow
Eli Berkow

Reputation: 2725

I have removed some of your styling code but this should give the desired color result:

library(shiny)
library(shinydashboard)

ui <- shinyUI(dashboardPage(
    dashboardHeader(title = "a"),
    dashboardSidebar(
        tags$style(HTML(".sidebar-menu li a { font-size: 100px; }")), 
        
        menuItem("first"),
        menuItem("second")
    ),
    dashboardBody(
        tags$style(HTML(".sidebar-menu li a { font-size: 100px; }")),
        tags$head(tags$style(HTML('
            .skin-blue .sidebar a {
                color: #ccff00;
            }'
        ))),
        
        "HI"
        
    )))

server <- shinyServer(function(input,output){
    
})

shinyApp(ui,server)

image

Upvotes: 1

Related Questions