Embeded Streamlit App Footer?

[mvnchi]

Hello Streamlit Community,

i’m curious if it is possible to hide the footer when embedding a Streamlit Application?

As an example below:

I have a separate section linked to streamlit.io within my app but that footer kind of interferes with my website.

[dataprofessor]

Hi @mvnchi

Yes, it is possible to remove the footer, you can hide it via CSS customization. The name of the CSS element to hide can be figured out by using the inspect element in Google Chrome. More details about how to do so is demonstrated in this video:

How to apply custom CSS styles in Streamlit apps

Hope this helps!

Best regards,
Chanin

[bondares]

Thank you for your reply. I have the same problem. Such a footer appears only in embedded apps, so I tried the following code, but it doesn’t help.

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

[echanx24]

Hi - I’m having the same problem. Has anybody found a solution to this?

[Charly_Wargnier]

Hey @echanx24 and @bondares,

I assume you’re using the latest version of Streamlit?

I know that what is possible to do with CSS tweaking may change from version to version, and a CSS trick that worked before may not work anymore.

Maybe @dataprofessor has a workaround for this?

Best,
Charly

[John_Smith]

This works when I’m running my streamlit app locally and embedding it. But when it’s from the community cloud, it ignores this for some reason.

[1kenobitoby]

The only way to get rid of it I've found is cover it up.
See this answer