How to make the positions of buttons in navbar fixed even when the screen size changes in Dash-plotly with python

To prevent the contents of the block from being wrapped to another line, you need to add the white-space: nowrap; to this block CSS style.

So, for Dash it is 'whiteSpace': 'nowrap':

app.layout = html.Div([
    html.Div([
        dbc.Row(
            [
                dbc.Col(
                    [button_group],
                    style={'whiteSpace': 'nowrap'}
                ),
            ],
            style={
                'textAlign': 'center',
                'position': 'sticky',
                'backgroundColor': '#101820',
                'display': 'flex',
                'marginRight': '0px',
            },
        ),
        dcc.Location(id='url', refresh=False),
        html.Div(id='page-content', children=[])
    ]),
])

The only way to display the navigation bar correctly when the zoom changes, which I know is a fixed width layout.

This is a sample code with a little refactoring. The style of the buttons has been moved to nav_btn_style, unnecessary nested elements have been removed.

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
from dash.dependencies import Output, Input
import dash_bootstrap_components as dbc

# BS = "https://codepen.io/chriddyp/pen/bWLwgP.css"
app = dash.Dash('vehicle-data', external_stylesheets=[dbc.themes.BOOTSTRAP])

# style for navigation buttons
nav_btn_style = {
    'align': 'center',
    'color': 'white', 
    'backgroundColor': '#101820',
    'fontSize': '1rem',
    'width': '10rem',
    'height': '3.2rem',
    'margin': '0rem 1rem',
}

button_group = dbc.Nav(
    [
        dbc.NavItem(dcc.Link(
            dbc.Button(
                children='HOME',
                style=nav_btn_style,
                ),
            href='/',
            refresh=True),
            ),
        dbc.NavItem(dcc.Link(
            dbc.Button(
                children='OVERVIEW',
                style=nav_btn_style,
                ),
            href='/pages/overview',
            refresh=True),
            ),
        dbc.NavItem(dcc.Link(
            dbc.Button(
                children='GRAPH',
                style=nav_btn_style,
                ),
            href='/pages/graph_page',
            refresh=True),
            ),
        dbc.NavItem(dcc.Link(
            dbc.Button(
                children='CONSOLE',
                style=nav_btn_style
                ),
            href='/log_stream',
            refresh=True),
            ),
        dbc.NavItem(dcc.Link(
            dbc.Button(
                children='DIAGNOSTIC',
                style=nav_btn_style,
                ),
            href='/pages/diag',
            refresh=True),
            )
    ],
    horizontal='around',
    style={
        'flexWrap': 'nowrap',  # no wrap buttons 
        'padding': '0.5rem 3rem',
        'border': '3px dotted crimson',  # nav bar border
        'position': 'sticky',
        'backgroundColor': '#101820',
        }
)

app.layout = html.Div([
    button_group,
    dcc.Location(id='url', refresh=False),
    html.Div(
        id='page-content', children=['TEST'],
        style={
            'height': '20rem',
            'border': '3px dotted royalblue',
            'display': 'flex',
            'justifyContent': 'center',
            'alignItems': 'center'
            }
        ),
    ],
    style={'margin': '0px auto', 'width': '80rem'}  # fixed width for outer div
)


if __name__ == '__main__':
    webbrowser.open('http://127.0.0.1:8050/')
    app.run_server(debug=True)

and how it look

Simply add brand="Fixed Navbar" to your code just like shown below:

nav = dbc.NavbarSimple(
    children=[
        dbc.NavItem(dbc.NavLink("Page 1", href="#")),
        dbc.DropdownMenu(
            children=[
                dbc.DropdownMenuItem("More pages", header=True),
                dbc.DropdownMenuItem("Page 2", href="#"),
                dbc.DropdownMenuItem("Page 3", href="#"),
            ],
            nav=True,
            in_navbar=True,
            label="More",
        ),
    ],
    brand="Fixed Navbar",
    brand_href="#",
    color="lightgreen",
    dark=True,
)

now above assigned nav can be added to UI by:

app.layout = html.Div(children=[

    nav,
])

if __name__ == '__main__':
    app.run_server(debug=True)

Also,
make sure to add import dash_bootstrap_components as dbc to your code.