Dash: How to change a navbar's brand colour

Dash Python
1

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!

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