Black Lives Matter. Please consider donating to Black Girls Code today.

Dash: How to change a navbar's brand colour

In a Plotly Dash web application I’m working on, I’m using a NavbarSimple object.

I’ve implemented a stylesheet as such:

    .navbar-brand {
        color: white;

I’ve correctly imported it, as shown by other styles correctly being implemented. However, I can’t find many resources on how to change the brand colour aside from what I’ve already done, and I haven’t been able to figure out how to do it via experimentation.

I checked the presented page’s source to find the class name of the brand, and it is the same as shown in the code snippet.

If there’s a good resource showing how to do so, or you know how and want to share this bit of intrigue, I would appreciate it a lot!

The Bootstrap stylesheet specified the brand color something like this (depending on the type of navbar you’re using)

.navbar-light .navbar-brand {
  color: rgba(0,0,0,.9)

Since the selector .navbar-light .navbar-brand is more specific than your selector .navbar-brand, it will be given precedence over your styles.

To fix it, set the color with a more specific selector. One option is to set the id of the navbar, then refer to that in the stylesheet. That will take precedence over pretty much any competing style.

import dash
import dash_bootstrap_components as dbc

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.NavbarSimple(
    [dbc.NavLink("About", href="/about")], brand="Tom", id="navbar"

if __name__ == "__main__":
/* assets/style.css */
#navbar .navbar-brand {
  color: blue;
1 Like