Dash: How to change a navbar's brand colour

Dash Python
2

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.

# app.py
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__":
    app.run_server(debug=True)

/* assets/style.css */
#navbar .navbar-brand {
  color: blue;
}
1 Like