CODEWITHSUNDEEP
rsubmenushinydashboard
Berndit
Berndit

Reputation: 23

Change color in Shiny Dashboard for menuSubItem

I have a problem with the colors for menu subItems.
The color spreads first over all the subitems (picture 1), the font color is grey.
And when I hover the top-menu-item is black (picture 2).

What works so far is changing the background color of the submenu:

.skin-red .main-sidebar .sidebar .sidebar-menu .treeview-menu {
    background-color: #FDFDFD;
}

I tried variations of:

.skin-red .main-sidebar .sidebar .sidebar-menu .treeview-menu a {
    color: #8e44ad;
}   

.skin-red .main-sidebar .sidebar .sidebar-menu .treeview-menu a:hover {
    color: #8e44ad;
}

With submenu selected:

Submenu selected

With submenu selected and hovered in this area:

Submenu selected and hovered in this area

Thanks for your help!

Upvotes: 1

Views: 1633

Answers (1)

panman
panman

Reputation: 1341

I know this questions is quite dated, but I just came across this question while trying to solve the same problem. What worked in my case was adding the following tags about .treeview-menu in the dashboardSidebarsection.

dashboardSidebar(width = 260,
    # ...sidebar items and other tags I need
        tags$style(HTML(".main-sidebar .sidebar .sidebar-menu .treeview-menu li.active a {background-color: #1E282C !important;}")),
        tags$style(HTML(".main-sidebar .sidebar .sidebar-menu .treeview-menu li:hover a {background-color: #1E282C !important;}"))
    # ...some other tags I need
)

I hope this helps.

Upvotes: 2

Related Questions