Remove UI Top Bar/Forehead

kevinlinxc · February 12, 2022, 11:20pm

My Streamlit app has this large margin at the top of the app that I would like to remove:

I saw that there was a ui.hideTopBar option in the streamlit config, but when I went to use it I got this error message:

Any advice?

bobeartoes · February 13, 2022, 12:31pm

Works on streamlit==1.5.0 but notably only removes the loading icon and the Stop button, the large empty margin at the top is still there.

# .streamlit/config.toml
[ui]
hideTopBar = true

snehankekre · February 14, 2022, 8:02am

Hi @kevinlinxc

You can use the following unofficial CSS hack to remove the top margin:

<style>
    #root > div:nth-child(1) > div > div > div > div > section > div {padding-top: 0rem;}
</style>

Here’s an example:

import streamlit as st

hide_streamlit_style = """
<style>
    #root > div:nth-child(1) > div > div > div > div > section > div {padding-top: 0rem;}
</style>

"""
st.title("Test")
if st.checkbox('Remove padding'):
    st.markdown(hide_streamlit_style, unsafe_allow_html=True)

Hope it helps!

Best,
Snehan