Fixed position Navigation Bar

Dash Python
1

I have a navigation bar on top of my app which I would like to always keep visible
I do the trick by embedding my Html.A in an Html,Div with a style attribute position : fixed

This works fine
The navbar stays visible on the top f my page when I scroll down
but if I have a graph in my page and I scroll down then the graph will hide my navabr even it seems that its position is fixed
please check my code snippet below , I also include my css external sheet`

import dash
import dash_html_components as html
import dash_core_components as dcc

external_stylesheets = [‘/assets/test.css’]
app = dash.Dash(name,external_stylesheets=external_stylesheets)

app.layout = html.Div(children = [html.Div(children =[ html.Ul(children= [
html.Li(html.A(‘Home’,className=‘active’ ,href =‘#home’)),
html.Li(html.A(‘News’, href =‘#news’)),
html.Li(html.A(‘Home’, href =‘#contact’)),
html.Li(html.A(‘Home’, href =‘#about’)),
])],style={‘background-image’:‘url(“/assets/diginex_inline_logo.svg”)’,
‘background-repeat’: ‘no-repeat’,‘background-position’: ‘right top’,
‘background-size’: ‘300px 30px’,‘height’:‘5%’,‘position’:‘fixed’,
‘top’:‘0’,‘border’:‘3px solid’,‘width’:‘100%’}),
html.Div(style={‘padding’:‘20px’,‘margin-top’:‘30px’,‘background-color’:‘#FFFFFF’,‘height’:‘1500px’},children=[
#html.Div(dcc.Graph(style={‘height’:‘500px’})),
html.H1(‘Fixed Top Navigation Bar’),
html.H2(‘Scroll the page to see the effect’),
html.H2(‘The Navigation bar will stay at the top of the page while scrolling’),
html.P(‘Some text some text some text some text…’),
html.P(‘Some text some text some text some text…’),
html.P(‘Some text some text some text some text…’),
html.P(‘Some text some text some text some text…’),
html.P(‘Some text some text some text some text…’),
html.P(‘Some text some text some text some text…’),
html.P(‘Some text some text some text some text…’),
html.P(‘Some text some text some text some text…’),
html.P(‘Some text some text some text some text…’),
html.P(‘Some text some text some text some text…’),
html.P(‘Some text some text some text some text…’),
html.P(‘Some text some text some text some text…’),
html.P(‘Some text some text some text some text…’),
html.P(‘Some text some text some text some text…’),
html.P(‘Some text some text some text some text…’),
html.P(‘Some text some text some text some text…’),
html.P(‘Some text some text some text some text…’),
html.P(‘Some text some text some text some text…’),
html.P(‘Some text some text some text some text…’),
html.P(‘Some text some text some text some text…’),
html.P(‘Some text some text some text some text…’),
])
])

if name == ‘main’:
app.run_server(debug=True,port =8051)

you will see the difference in befaviour after you comment out the line html.Div(dcc.Graph(style={‘height’:‘500px’}

this is my css file test.css referenced as external_sheets

body {margin:0;}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top:0;
width: 50%;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #4CAF50;
}

What am I ding wrong? Please help if you have experienced omething similar

2

You need to apply z-index with a high value to the element you want to have on top, e.g. z-index: 999

2 Likes
3

Thank you this works if i use the camel case zIndex but not z-index which is fine
However my top div including the nav bar while now in front is trans lucid and when i scroll on my page i see through it which makes it not quite readable
I tried to set the div opacity to 1 but that doesn’t change anything any idea how I can make it opaque

navbar
navbar.png1684×225 40.8 KB

4

You have to apply a white background to the header div.

2 Likes