Is it possible to add a fixed sticky header like sidebar to streamlit?

🎈 Using Streamlit
1

Apart from the side bar, can I add a fixed stickey header to a streamlit app?

For on a mobile device like a cellphone, I have limited space to show users all the charts and data. So I need a fixed header to show some key index when users scroll down and adjust some sliders.

2 Likes
2

here’s my quick solution:

st.write('<style>body { margin: 0; font-family: Arial, Helvetica, sans-serif;} .header{padding: 10px 16px; background: #555; color: #f1f1f1; position:fixed;top:0;} .sticky { position: fixed; top: 0; width: 100%;} </style><div class="header" id="myHeader">'+str(average_score)+'</div>', unsafe_allow_html=True)

1 Like
3

Hello @xzrokeman, welcome to the forums :speech_balloon:

I think the JS part of your HTML code shouldn’t work, because st.write(string, unsafe_allow_html=True) fallbacks on st.markdown(string, unsafe_allow_html=True) which removes any JS tag from the app (you can actually write code that breaks in the JS tag to validate this). You can also see the script have disappeared in the page source on the web browser.

Anyway the sticky should work without the JS :slight_smile:

Can you reference your issue in Are you using HTML in Markdown? Tell us why! ? That’s a good example on how to use HTML/CSS to sticky a header !

1 Like
4

Oh, you’re right，thanks for reminding. :smile:

I appreciate streamlit for not allowing complex html stuff, but in real world layout style really matters.

5

Yeah, custom layout has been a common remark amongst Streamlit users, so it’s now a key part of Streamlit’s roadmap :slight_smile: don’t hesitate to inject your thoughts on the relevant topic