Navbar doesn't align vertically to center perfetly

Dash Python
,
1

Hey everyone,
I am trying to center my components in a dbc.Navbar to center vertically and for some reason. I really cannot find a reason why.

dbc.Navbar([
        dbc.Container(
            [
                dbc.Row([
                    dbc.Col([
                        html.Img(src='data:image/png;base64,{}'.format(house_base64), height="40px", className = "ml-2 mb-1"),
                        dbc.NavbarBrand("Atlantic Hydraulics Verification", className="ms-3 font-weight-bold")
                    ],
                    width={"size":"auto"})
                ],
                align="center",
                className="g-0"),

                dbc.Row([
                    dbc.Col([
                        dbc.Nav([
                            dbc.NavItem(dbc.NavLink(children = [
                                html.Img(src = 'data:image/png;base64,{}'.format(house_base64), height = "20 px"),
                                html.Br(),
                                "Home"
                                ], className = "mb-2", style = {"textAlign": "center"})),
                            dbc.NavItem(dbc.NavLink(id = "link-documentation", children = [
                                html.Img(src = 'data:image/png;base64,{}'.format(document_base64), height = "20 px"),
                                html.Br(),
                                "Documentation",
                                ], style = {"textAlign": "center"}
                            )),
                            dbc.NavItem(
                                dbc.NavLink(
                                    id = "link-themes", 
                                    children = [
                                        html.Img(src = 'data:image/png;base64,{}'.format(pipette_base64), height = "20 px"),
                                        html.Br(),
                                        " Themes",
                                    ], 
                                style = {"textAlign": "center"}, n_clicks = 0
                                )
                            ),
                        ],
                        navbar=True
                        )
                    ],
                    width={"size":"auto"})
                ],
                align="center"),
                dbc.Col(dbc.NavbarToggler(id="navbar-toggler", n_clicks=0)),
                
                dbc.Row([
                    dbc.Col(
                        dbc.Nav([
                            html.Img(
                                src = 'data:image/png;base64,{}'.format(grundfos_logo_base64),
                                height = 30,
                            ), 
                        ])
                    )
                ],
                align="center")
            ],
            fluid=True
            
        ),
        ],
        color = "primary",
        dark = True,
        sticky = "top",
    ),

When I run the code, the Navbar looks like this:

Screenshot_4
Screenshot_41422Ă—110 12.9 KB

To make it look more visible, I took a screen when viewing with F12:
details
details1422Ă—110 12.4 KB

Any ideas? Thanks!

2

Hi @martin.vlacil,

It’s difficult to say without replicating on my end, but usually it requires some tinkering with flexbox alignment properties. Try adding align-items-center to the style of the row components (read more in the Bootstrap docs here). Also, check the actual amount of padding and margin on each of the elements in your navbar. You can do this by going down the hierarchy in the developer console (F12).

Last thing to check are the images themselves; make sure there is no white space baked into the image.

1 Like
3

I may not be understanding, those looked centered on the navbar to me. Am i missing the question?
You might be able to apply a vertical-align:middle CSS rule to it and see if that helps.

4

I have removed all vertical padding and margin and almost everything works except for the NavbarBrand.

1
11070Ă—101 12.3 KB

After inspecting, I can see that, for some reason, the NavbarBrand componend does not get centered inside the column that I have set to align items in center.
2
3
4
You can see that the NavbarBrand is pushed to the top of the column for some reason. I have also tried adding padding and margin to the top of the NabarBrand so it gets pushed down:
5
Instead, it the padding and margin reaches outside the top of the page.

5

I also tried forcing it to the bottom by aligning the items in the column to “end”, but that does not move the brand down at all.