I updated my app from dash-bootstrap-components from 1.2.1 to 1.5.0 and now my nav bar styling has changed a bit and trying to figure out how to get it to the old look with the new version
Before:
After:
Any guidance on this would be super helpful, thanks!
Hi @cdolfi
Can you post a minimal example that reproduces the issue? Can’t tell what going on just from an image,
Sure, no code changes between the two pictures. Including just the left side of the nav bar:
navbar = dbc.Navbar(
dbc.Container(
[
dbc.Row(
[
dbc.Col(
[
html.Img(
src=dash.get_asset_url("8knot-logo-vertical.png"),
height="40px",
),
dbc.NavbarBrand(
"8Knot",
id="navbar-title",
className="ms-2",
),
],
width={"size": "auto"},
),
dbc.Col(
[
dbc.Nav(
[
dbc.NavLink("Welcome", href="/", active="exact"),
dbc.NavLink(
"Contributions",
href="/contributions",
active="exact",
),
dbc.DropdownMenu(
[
dbc.DropdownMenuItem(
"Behavior",
href="/contributors/behavior",
),
dbc.DropdownMenuItem(
"Contribution Types",
href="/contributors/contribution_types",
),
],
label="Contributors",
nav=True,
),
dbc.NavLink(
"Affiliation",
href="/affiliation",
active="exact",
),
dbc.NavLink("CHAOSS", href="/chaoss", active="exact"),
dbc.NavLink("Info", href="/info", active="exact"),
],
navbar=True,
)
],
width={"size": "auto"},
),
],
align="center",
className="g-0",
justify="start",
),
],
fluid=True,
),
color="primary",
dark=True,
sticky="top",
)
Also: the app is overall zoomed in the dash bootstrap update 1.5.0 in comparison to 1.2.1 so curious to see if there is something we need to change to have the original sizing (I can open a new discussion on this as well)
Which theme are you using? Do you have any custom css?
I am using SLATE and I do use some custom CSS but the only that applies to the nav bar is changing the color of the “8Knot” text
Hi @cdolfi
The dash-bootstrap-components library updates the the Bootstrap style sheets to the latest with each release. You can see which version by adding:
print(dbc.themes.SLATE)
dbc v 1.2.1 uses Bootswatch 5.1.3
https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/slate/bootstrap.min.css
dbc 1.5.0 uses Bootstwatch 5.3.1
https://cdn.jsdelivr.net/npm/bootswatch@5.3.1/dist/slate/bootstrap.min.css
If you inspect the browser you will see the different styles applied.
You could override the new style with your own custom CSS