Help understanding and customizing dbc.Navbar

Dash Python
1

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 !

2

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')))
3

I came across the same issue: the style from the navbar was not properly inherited from the boostrap theme.

My fix was to ensure that the class ‘navbar-nav’ was properly declared to ensure proper inheritance:

    @app.callback([Output('navbar-container', 'children')],
                  [Input('url', 'pathname')])
    def navbar_generataor(pathname):
        navbar = dbc.Navbar([
            dbc.Row([
            html.Img(src="/gui/assets/my_logo.png", height="70vw", width="auto"),
            dbc.Nav([
                dbc.NavItem(dbc.NavLink('Home', href='/')),
                dbc.NavItem(dbc.NavLink('Live Preview', href='/preview')),
                dbc.NavItem(dbc.NavLink('Configure Test', href='/configure')),
                dbc.NavItem(dbc.NavLink('Visualize Results', href='/visualize'))],
            className='navbar-nav')],
            align="center")],
            id='navbar', color="light", light=True)

        # Activate the last selected page
        for page in navbar.children[0].children[1].children:
            page.children.active = True if page.children.href == pathname else False

        return [navbar]