Nav Menu, looks good on Desktop, bad on Mobile

[saxon11]

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=[]),
    ]
)

[martin2097]

Hello @saxon11 !

If you want a navbar without much coding check NavbarSimple Navbar - dbc docs . It should do the trick with burger menu on smaller screens.

If you want to get inspired with navbars check DMC & DBC Building Blocks .

Also if you want to center something you can do it with css in style prop or just use the Layout with Rows and Cols Layout - dbc docs .

Maybe last addition. If you need a lot of responsivness on all devices maybe check also the mantine library there are many great components like MediaQuery to help you https://www.dash-mantine-components.com/ .