How to edit "dbc.NavbarBrand"?

Dash Python
1

Hi everyone!

I am building a webapp for myself which would function as my CV.
This is how the top of my CV looks like.

image
image1880×161 7.04 KB

My code is below.

Question: How do I change placemement and font size of the “dbc.NavbarBrand” element? I would like for “Curriculum Vitae” to be written right in the center of the page and in a bigger font.

from email import header
import dash
from dash import Dash, html
import dash_bootstrap_components as dbc

app=Dash(__name__, use_pages=True, external_stylesheets=[dbc.themes.SUPERHERO])
server = app.server

header=dbc.Navbar(
    dbc.Container(
        [
            dbc.Row(
                [dbc.Col([
                    dbc.Nav(
                        [
                            dbc.NavLink(page["name"],href=page["path"])
                            for page in dash.page_registry.values()
                            if not page["path"].startswith("/app")
                        ]
                    )
                ]
            ),
            dbc.Col([dbc.NavbarBrand("Curriculum Vitae", className="ms-2")])
            ])
        ],
        fluid=True #spaces from left and right
    ),
    dark=True,
    fixed="top",
    color="dark" #can make the NavBar "transparent" if needed
)

#fluid=False creates spaces from left and right
#dsh.page_container updates the link (adds "/contacts" if clicked on "Contacts" page)
app.layout=dbc.Container(
    [
        header,
        html.Br(),
        html.Br(),
        html.Br(),
        dash.page_container
    ],
    fluid=False
)

if __name__=="__main__":
    app.run_server(debug=False)

Thanks for all the help in advance!

2

Hi @mrel, here is one way to do it.

  • Substituded the dbc.Container with a dbc.Col()
  • Added a dummy dbc.col() so that the column with the NavBarBrand is centered
  • Added auto margins to the center column
  • Centered the content of the dbc.Row()
  • Added the style to the dbc.NavBarBrand() 
import dash
from dash import Dash, html
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.SUPERHERO])
server = app.server

header = dbc.Navbar(
    dbc.Col(
        [
            dbc.Row(
                [
                    dbc.Col(
                        dbc.Nav(
                            [
                                html.Div('dummy_page_1', className='pe-2'),
                                html.Div('dummy_page_2', className='pe-2'),
                            ],
                        ),
                        width={"size": 3}
                    ),
                    dbc.Col(
                        dbc.NavbarBrand("Curriculum Vitae", style={'font-size': 40}),
                        width={"size": "auto"},
                        className='ms-auto me-auto'
                    ),
                    dbc.Col(
                        width={"size": 3}
                    )
                ],
                justify='center'
            ),
        ],
    ),
    dark=True,
    fixed="top",
    color="dark"  # can make the NavBar "transparent" if needed
)

# fluid=False creates spaces from left and right
# dsh.page_container updates the link (adds "/contacts" if clicked on "Contacts" page)
app.layout = dbc.Container(
    [
        header,
        html.Br(),
        html.Br(),
        html.Br(),
        dash.page_container
    ],
    fluid=False
)

if __name__ == "__main__":
    app.run_server(debug=False)

d
d1913×152 5.1 KB

1 Like
3

Thank you, @AIMPED !
Worked like a charm :slight_smile:

1 Like