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

Help understanding and customizing dbc.Navbar

Hi,

I’m trying to add a Navbar to my app, but I don’t come from a web development environment, so it’s been confusing. I want two things:

  • Add anchor links to it (it’s a long app).
  • Show those links as white text.

The relevant part of my navbar looks like this:

navbar = dbc.Navbar(
    [
        
        dbc.Nav([
            dbc.NavItem(dbc.NavLink("Case evolution", href="#case-evolution")),
            dbc.NavItem(dbc.NavLink(html.A("Testing data", href="#testing-data"))),
            dbc.NavItem(dbc.NavLink(html.A("Evolution by group", href="#group-evolution")))
        ], navbar=True, className='link')


    ],
    light=True,
    color="#F81875",
)

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

Also I added this bit of CSS, to see if that could help:

.link
{
   color:#FFFFFF;
   text-decoration: none; 
   background-color: none;
}

You can see the first NavItem doesn’t use html.A(), because I thought it should work anyways, but it doesn’t. This brings the following navbar:

image

So, is there any way to turn the blue links into white links, and maybe don’t get them underlined when hovering? Else, is there any way to create anchor links without using html.A(), and then turn the black text into white text.
Any help would be appreciated. Thanks !

Managed to do it! I had to use Bootstrap classes (if someone knows why normal classes don’t work when using bootstrap, please tell me), so this did it:

dbc.NavItem(dbc.NavLink(html.A("Case evolution", href="#case-evolution",
                                           className='text-light font-weight-bold')))