Question: For my Dash app, I want to create a navigation bar that has links to the different pages but also additional stuff, e.g. the currently logged in user, and logos and stuff.

However, I unfortunately cannot use pages (Like in the "Navbar" example in dbc) since the WebApp has to be hosted as a single-url app inside another tool. My only option is to got with [dcc.Tabs](https://dash.plotly.com/dash-core-components/tabs).
However, it looks to me like dcc.Tabs forces a newline behind the Tabs. I tried different things to prevent that, but nothing seems to be working. The best I got so far is the example below. How do I make it so that the text is in the same row as the Tabs element?

[![enter image description here](https://i.stack.imgur.com/OSsmb.jpg)](https://i.stack.imgur.com/OSsmb.jpg)

```
tabs_styles = {
    'height': '44px', "width": "49%", "display":"inline-block"
}

app.layout = html.Div(children=[
    html.Div(children=[
        dcc.Tabs(id="tabs-styled-with-inline", value='tab-1', children=[
            dcc.Tab(label='Page1', value='tab-1', style=tab_style, selected_style=tab_selected_style),
            dcc.Tab(label='Page2', value='tab-2', style=tab_style, selected_style=tab_selected_style),
        ], style=tabs_styles)]),
    html.Span(children=[
        "   Logged in as ",
        html.Strong(id="username")
        ], style = tabs_styles),
    html.Div(children=[
        # Distance to header:
        html.Hr(),
        html.Div(id='tabs-content-inline')
    ])
])

```

Answer: 
Your inline style should be applied to the parent div of your Tabs component. I made some small modifications here (look at **tabs\_container\_styles**):

```py
tabs_styles = {"height": "44px"}
tabs_container_styles = {"width": "49%", "display": "inline-block"}

app.layout = html.Div(
    children=[
        html.Div(
            children=[
                dcc.Tabs(
                    id="tabs-styled-with-inline",
                    value="tab-1",
                    children=[
                        dcc.Tab(label="Page1", value="tab-1"),
                        dcc.Tab(label="Page2", value="tab-2"),
                    ],
                    style=tabs_styles,
                )
            ],
            style=tabs_container_styles,
        ),
        html.Span(
            children=["   Logged in as ", html.Strong(id="username")], style=tabs_styles
        ),
        html.Div(
            children=[
                # Distance to header:
                html.Hr(),
                html.Div(id="tabs-content-inline"),
            ]
        ),
    ]
)

```
Set the `parent_style` property of your `Tabs` component instead of the `style` property and move your `Span` component to be a child of the div containing your `Tabs` component.

> 
> parent\_style (dict; optional): Appends (inline) styles to the top-level parent container holding both the Tabs container and the content container.
> 
> 
> 

> 
> style (dict; optional): Appends (inline) styles to the Tabs container holding the individual Tab components.
> 
> 
> 

<https://dash.plotly.com/dash-core-components/tabs>

MRE

```
from dash import Dash, html, dcc

tabs_styles = {"height": "44px", "width": "49%", "display": "inline-block"}

app = Dash()
app.layout = html.Div(
    children=[
        html.Div(
            children=[
                dcc.Tabs(
                    id="tabs-styled-with-inline",
                    value="tab-1",
                    children=[
                        dcc.Tab(
                            label="Page1", value="tab-1", style={}, selected_style={}
                        ),
                        dcc.Tab(
                            label="Page2", value="tab-2", style={}, selected_style={}
                        ),
                    ],
                    parent_style=tabs_styles,
                ),
                html.Span(
                    children=["   Logged in as ", html.Strong(id="username")], style=tabs_styles
                ),
            ]
        ),
        html.Div(
            children=[
                # Distance to header:
                html.Hr(),
                html.Div(id="tabs-content-inline"),
            ]
        ),
    ]
)

if __name__ == "__main__":
    app.run_server()

```