I’m new to Dash and loving it! Starting with that basic layout in particular the Nav, I’ve got it decent (see screenshot). When I got to mobile it adds lines and just doesn’t look right – as in Mobile by default when open the webpage, the Nav takes up 30% of the screen, and is all spaced out, i would expect the “hamburger” icon or similar and not have nav take up so much space. I’ve also been struggling with trying to center the navbar on Desktop… Suggestions?
Desktop version:
Mobile version:
html.Div(
children=[
dcc.Location(id="url", refresh=False),
dbc.Navbar(
children=[
dbc.NavItem(
html.Img(src=logo_encoded, height="30px"),
),
dbc.NavItem(
dbc.NavbarBrand(
"My Cool App",
style={"color": "white"},
href="/",
)
),
dbc.Nav(
[
dbc.NavItem(
dbc.NavLink(
children="Features",
id="features_link",
style={"color": "white"},
href="/features",
)
),
dbc.NavItem(
dbc.NavLink(
children="Pricing",
id="pricing_link",
style={"color": "white"},
href="/pricing",
)
),
dbc.NavItem(
dbc.NavLink(
children="Testimonials",
id="testimonials_link",
style={"color": "white"},
href="/testimonials",
)
),
dbc.NavItem(
dbc.DropdownMenu(
children=[
dbc.DropdownMenuItem(
"Summary",
href="/summay_view",
),
dbc.DropdownMenuItem(
"Daily Diet",
href="/daily_diet",
),
dbc.DropdownMenuItem(
"Macros",
href="/macros",
),
dbc.DropdownMenuItem(
"Insights",
href="/insights",
),
dbc.DropdownMenuItem(
"General Calculations",
href="/calculations",
),
],
nav=True,
in_navbar=True,
label="FAQ",
toggle_style={"color": "white"},
)
),
],
),
],
style={"paddingLeft": 25},
color="primary",
dark=True,
),
html.Div(id="page-content", children=[]),
]
)