Change the color for active item in my sidebar

Dash Python
1

Hello, i’m working with dash and i used the code in documentation for sidebar:
nav = dbc.Nav(
[
dbc.NavItem(dbc.NavLink(“Active”, active=True, href="#")),
dbc.NavItem(dbc.NavLink(“A link”, href="#")),
dbc.NavItem(dbc.NavLink(“Another link”, href="#")),
dbc.NavItem(dbc.NavLink(“Disabled”, disabled=True, href="#")),
],
pills=True,
)
i used “pill” to indicate Active items but i want to change the color for active item , is there a way to do that?

1 Like
2

You need to write a bit of custom CSS to overwrite the Bootstrap styles. Something like this should do the trick

.nav-pills .nav-link.active {
    color: #fff;
    background-color: orange;
}

I saved that in a file assets/custom.css and ran the example app I think you’re looking at and saw this.

image

Change background-color to whatever you want, and color to whatever color you want the text to be.

3 Likes
3

It works! Thank you very much tcbegley.

1 Like
4

@tcbegley thx a lot for this explanation.
had spent like 3h trying to solve it before i found this topic…

2 Likes