location dash bootstrap navbar

user_13535038 0
Viewed 1795

I have a navbar where i want the links in the center. I have them now on the right using classname 'ml-auto' but i cant' manage them to move to the center. Anyone who can help? Below my code.

nav_item = dbc.Nav(
    [
        dbc.NavItem(dbc.NavLink("World Map", active= True, href="/page-1")),
        dbc.NavItem(dbc.NavLink("Table", active= True, href="/page-2")),
        dbc.NavItem(dbc.NavLink("Moran's l", active= True, href="/page-3")),
        dbc.NavItem(dbc.NavLink("Scatter Plots", active= True, href="/page-4"))
    ],
    fill= True
)

navbar = dbc.Navbar(
    [
        html.A(
            # Use row and col to control vertical alignment of logo / brand
            dbc.Row(
                [
                    dbc.Col(html.Img(src= oord_logo, height="100px"), className="ml-5"),
                ],
                align="center",
                no_gutters=True,
            ),
            href="https://plot.ly",
        ),
        dbc.NavbarToggler(id="navbar-toggler"),
        dbc.Nav([nav_item], navbar=True, className="ml-auto",)
    ],
    color="white",
    dark=False,
    className = "mb-5"
)
bootstrap-4 plotly-dash css python
1 Answers

Use mr-auto instead of ml-auto.

With mr-auto you get margin on the right. This is what you want since you want the element with this class (the Nav component) displayed on the left.

Unrelated to the problem, but you nest one Nav component in another which seems unnecessary. Also you've put the NavbarToggler component in the middle which means the hamburger button generated by this component will also be displayed in the middle.

user_90983500
Related