Thin white space on top even after hiding header

Using Streamlit
#1

Hi everyone,

I used the st.markdown CSS hack to hide the Streamlit header, but there is still a thin white space on top. Do you know how to hide it too?

Additional context:

  • It is only noticeable when the sidebar is open.
  • Happens with Streamlit versions 1.8 and above.
  • Maybe it has something to do with the red decorator line that shows up by default, before hiding header.

Example code:

import streamlit as st

st.markdown("""
<style>
    #MainMenu, header, footer {visibility: hidden;}
</style>
""",unsafe_allow_html=True)

st.title('This is a test app')

st.sidebar.markdown('After hiding streamlit header there is still a thin white space on top, noticeable when sidebar is open.')
The Navigation bar I'm trying to add to my streamlit app is blurred
#2

Hi @marduk! :wave:

Juan here, you replied on one of my Core PRs asking about this issue, and since it’s a slightly different thing than what I’m working on there, I wanted to reply here so we can fix this out :slightly_smiling_face:

The issue you’re facing is related to the top: 2px and the height: calc(100vh - 2px) in the sidebar code. See screenshot below :point_down:

Screen Shot 2022-05-20 at 10.09.05 AM

You can remove that by adding the following to your custom CSS:

st.markdown("""
<style>
    #MainMenu, header, footer {visibility: hidden;}

    /* This code gets the first element on the sidebar,
    and overrides its default styling */
    section[data-testid="stSidebar"] div:first-child {
        top: 0;
        height: 100vh;
    }
</style>
""",unsafe_allow_html=True)

Try it out and let me know! One thing to note though, is that these default styles you’re overriding are there to ensure your app works flawlessly, so please be mindful that changing this behavior might lead to other issues on your app.

Other than that, happy coding!

2 Likes