Hi community!
Using the example from the Dash Bootstrap Components (dbc) 1.0.2 documentation, I am trying to implement a NavBar navigation bar. I want to layout some of the NavLinks to the left, and some special ones, e.g., ‘Help’, ‘About’ or ‘Login’ items to the right. With the code below, all items are aligned to the right. I tried multiple combinations of dbc.Rows and dbc.Cols but did not have any success. I assume, there are specific css keywords that would be helpful.
header = dbc.Navbar(
dbc.Container(
[
html.A(
dbc.Row([
dbc.Col(dbc.NavbarBrand("Title", className="ms-2"))
], align="center", className="g-0"), href="/", style={"textDecoration": "none"}
),
dbc.Row([
dbc.NavbarToggler(id="navbar-toggler"),
dbc.Collapse([
dbc.Nav([
dbc.NavItem(dbc.NavLink("Home")), # these should go to the left
dbc.NavItem(dbc.NavLink("Page 1")),
dbc.NavItem(dbc.NavLink("Page 2")),
dbc.NavItem(dbc.NavLink("Help")), # these should go the right
dbc.NavItem(dbc.NavLink("About"))
])
], id="navbar-collapse", is_open=False, navbar=True)
])
],
fluid=True,
),
dark=True,
color="dark"
)
I found a similar discussion in an old stackoverflow topic, and although the solution in pure html looks straightforward, I failed to transfer it to my problem. I am fairly inexperienced with css, so any help and pointers towards relevant documentation would be highly appreciated!
1 post - 1 participant
