Hide "Deploy" and Streamlit mainmenu

Using Streamlit
1

How can we hide the “Deploy” button and Streamlit mainmenu, and let our own display starts from the very top of the page?

I did add the following code:

st.set_page_config(page_title="Page Title", layout="wide")

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

but still fail to start the display at the very top of page.

Thanks.

2

Try this:

import streamlit as st

st.set_page_config(page_title="Page Title", layout="wide")

st.markdown("""
    <style>
        .reportview-container {
            margin-top: -2em;
        }
        #MainMenu {visibility: hidden;}
        .stDeployButton {display:none;}
        footer {visibility: hidden;}
        #stDecoration {display:none;}
    </style>
""", unsafe_allow_html=True)
3

Yes, that almost perfect except there is still a big blank line at top. Just want to ultilize the limited screen space as users dont like the have scroll bar

4

Can you share more code of what you’re working on screenshots of what you’re seeing as well?

5

Just have the following codes for adjusting the view:

st.markdown("""
    <style>
        .reportview-container {
            margin-top: -2em;
        }
        #MainMenu {visibility: hidden;}
        .stDeployButton {display:none;}
        footer {visibility: hidden;}
        #stDecoration {display:none;}
    </style>
""", unsafe_allow_html=True)

and the screen looks like below:

image
image3232×845 210 KB

in which we just want to utilize the top empty space (around one empty line)

Thanks a lot.

6

You can inspect the element that is responsible for that extra white space and remove it by adding it to the CSS within the st.markdown above that we’ve used for the others.