Hi there!
My Navbar overlaps all my pages. All the current solutionsseem to add padding to each page, however, as I have many, many pages, I was wondering if there is a solution where I could adjust to the app.py file or change the parameters of the page.container instead, so I don’t have edit every page script?
How did you create the navbar? Can you show your code?
Thank you for your reply, It is quite a big navbar but here it is 
class DashApp:
def serve_layout(name, numroles):
search_bar = html.Div([
html.Div(["", dcc.Dropdown(id='my-page', value='', options=[{'label': i[6:], 'value': i} for i in dash.page_registry])],
style={"display": "inline-block", "width": "300%"}),
html.Div(id='page-link', style={"display": "inline-block"}),
# html.Div(html.Button("Search", className="govuk-button--secondary", n_clicks=0),
# style={"display": "inline-block"}),
])
navbar = dbc.Navbar(
dbc.Container(
[
html.A(
dbc.Row(
[
# dbc.Col(html.Img(src=LOGO, height="60px")),
dbc.Col(html.Img(src=LOGO, height="60px"), style={"padding-right": "5%"}),
# dbc.Col(html.A(href="homepage",
# children=[dbc.NavbarBrand("Hawkeye", style={"padding-left": "4%",
# "padding-top": "4%",
# "color": "black"})])),
],
align="center",
className="g-0",
),
href="homepage",
style={"textDecoration": "none"},
),
dbc.Row(
[
dbc.NavbarToggler(id="navbar-toggler"),
dbc.Collapse(
dbc.Nav(
[
dbc.DropdownMenu(
nav=True,
in_navbar=True,
label="Dashboards",
toggle_style=DROPDOWN_STYLE,
children=[
dbc.DropdownMenuItem(
page["name"], href=page["path"]
)
for page in dash.page_registry.values()
if page["module"]
in ["pages.PowerBI_Test",
]
],
),
dbc.DropdownMenu(
nav=True,
in_navbar=True,
label="Thematic Summaries",
toggle_style=DROPDOWN_STYLE,
children=[
dbc.DropdownMenuItem(
page["name"], href=page["path"]
)
for page in dash.page_registry.values()
if page["module"]
in ["pages.Economy_Overview"
]
],
),
dbc.DropdownMenu(
nav=True,
in_navbar=True,
label="Macroeconomics",
toggle_style=DROPDOWN_STYLE,
children=[
dbc.DropdownMenuItem(
page["name"], href=page["path"]
)
for page in dash.page_registry.values()
if page["module"]
in ["pages.GDP",
"pages.Inflation",
"pages.ONS_labour_markets_and_paye",
# "pages.Rec_report_on_jobs",
# "pages.Indeed_online_job_postings",
# "pages.Adzuna_online_job_postings",
# "pages.HR1_redundancy_notifications",
# "pages.DWP_UC_Declarations",
# "pages.IoS_Period_on_Period_Growth",
"pages.ONS_BICS",
"pages.GfK_consumer_confidence",
# "pages.ONS_card_spending_volumes",
# "pages.ONS_house_price_index",
# "pages.ONS_total_retail_sales_volumes",
# "pages.Consumption_percentage_GDP",
"pages.ONS_business_investment",
# "pages.Lloyds_business_barometer",
# "pages.Market_PMI_release",
"pages.CBI_industrial_trends_survey"
]
],
),
dbc.DropdownMenu(
nav=True,
in_navbar=True,
label="Fiscal",
toggle_style=DROPDOWN_STYLE,
children=[
dbc.DropdownMenuItem(
page["name"], href=page["path"]
)
for page in dash.page_registry.values()
if page["module"]
!= "pages.not_found_404"
if page["module"]
in [
"pages.ONS_labour_markets_and_paye",
"pages.Rec_report_on_jobs"
]
],
),
dbc.DropdownMenu(
nav=True,
in_navbar=True,
label="International",
toggle_style=DROPDOWN_STYLE,
children=[
dbc.DropdownMenuItem(
page["name"], href=page["path"]
)
for page in dash.page_registry.values()
if page["module"]
!= "pages.not_found_404"
if page["module"]
in [
"pages.International_GDP",
"pages.International_inflation",
"pages.International_fiscal",
"pages.Consensus_gdp_forecasts",
"pages.Global_PMIs",
"pages.OIS_implied_rates",
"pages.AE_EA_Govt_yields",
"pages.Exchange_rate_indices",
"pages.Industrial_production",
"pages.Ifo_business_expectations",
"pages.Commodity_indices",
"pages.OECD_and_IMF_forecasts"
]
],
),
dbc.DropdownMenu(
nav=True,
in_navbar=True,
label="Financial Markets",
toggle_style=DROPDOWN_STYLE,
children=[
dbc.DropdownMenuItem(
page["name"], href=page["path"]
)
for page in dash.page_registry.values()
if page["module"]
!= "pages.not_found_404"
if page["module"]
in [
"pages.Equities",
"pages.Fixed_Income",
"pages.Commodities",
"pages.FX",
"pages.Volatility_and_derivatives",
"pages.Energy_futures",
# "pages.Market_implied_Bank_Rate_Expectations",
"pages.Yield_Curves",
"pages.Implied_volatilites_&_risk_reversals",
"pages.Inflation_swaps",
"pages.VIX_and_MOVE",
]
],
),
dbc.NavItem(
dbc.NavLink("Help", style={"color": "black"}),
# style={"color": "black"},
),
dbc.NavItem(dbc.NavLink("About", style={"color": "black"})),
dbc.Collapse(
search_bar,
id="navbar-collapse1",
is_open=False,
navbar=True,
style={"padding-left": "3%"}
),
],
# make sure nav takes up the full width for auto
# margin to get applied
className="w-100",
),
id="navbar-collapse",
is_open=False,
navbar=True,
),
],
# the row should expand to fill the available horizontal space
className="flex-grow-1",
),
],
fluid=True,
),
dark=True,
color="#FFFFFF",
)
return dbc.Container(
[navbar, dash.page_container],
fluid=True,
)
@callback(
Output('page-link', 'children'),
Input('my-page', 'value'),
prevent_initial_call=True
)
def update_links(value):
if value is not None:
value2 = value[6:]
first_uppercase = value2[0].upper() + value2[1:]
first_uppercase_spaces = first_uppercase.replace("_", " ")
first_uppercase_then_lowercase = value2[0].upper() + value2[1:].lower()
first_uppercase_then_lowercase_withspace = first_uppercase_then_lowercase.replace("_", " ")
print(value)
print(value2)
print(first_uppercase)
print(first_uppercase_then_lowercase)
print(first_uppercase_then_lowercase_withspace)
print(first_uppercase_spaces)
for page in dash.page_registry.values():
if page['name'] == first_uppercase or page['name'] == first_uppercase_then_lowercase or page['name'] == first_uppercase_then_lowercase_withspace or page['name'] == first_uppercase_spaces:
return html.Div([dbc.Button('Search', className="ccf2", href=page['path'])], style={"display": "inline-block"})
else:
no_update, no_update
So I’m fairly new to dash. I personally haven’t used layouts as classes. This is what I have done and have never had issues with navbars overlapping the rest of my page. Here’s an example of what I’m working on right now.
I create a folder called components and in there I put my navbar.
/components/navbar.py
from dash import html
import dash_bootstrap_components as dbc
calpine_logo = 'static\Capture-removebg-preview.png'
def navbar():
navbar = dbc.Navbar(
dbc.Container([
html.A(
dbc.Row([
dbc.Col(html.Img(src=calpine_logo, height='40px')),
dbc.Col(dbc.NavbarBrand('Calpine Big App', className='ms-2'))
],
align='center',
className='g-0',
justify='between',
)
),
dbc.NavbarSimple([
dbc.NavLink('Home', href='/', style={'color': 'white'}),
],
fluid=True,
color='#006699',
dark=True)
],
fluid=True),
style={'display': 'flex', 'justify-content': 'space-between', 'font-weight': '600'},
color='#006699',
dark=True
)
return navbar
Then I call it into my app.py and it will serve on every page.
app.py
import dash
from dash import html, dcc,
import dash_bootstrap_components as dbc
from components import navbar
app = dash.Dash(__name__, use_pages=True,
external_stylesheets=[dbc.themes.BOOTSTRAP],
suppress_callback_exceptions=True,
title='Big App')
nav = navbar.navbar()
app.layout = html.Div([
nav,
dash.page_container
])
if __name__ == "__main__":
app.run_server(
debug=True
)
Like I said, I’m fairly new to this so I’m not sure if my way is the most efficient, but you should be able to do the same with yours.
Thank you so much, I will try moving the navbar to a components file but I believe as this does not change any of the existing styling dimension it will not be able to affect the styling overlay
Yeah I’m not 100% if this is a fix, but I’m pretty sure this method would treat it as two separate pieces of the layout causing them to never overlap. Hopefully it works!
Thank you, unfortunately this didn’t work. but I changed all the pages individually so it is okay haha. There must be better way but at least it looks okay 
For me, with the nav bars and page content, I make sure that both are in a flex box. Which will allow them to grow and shrink accordingly.
You just need to make sure that the flex direction is column in this instance, vs row.