Remove "Made with Streamlit" from bottom of app

To hide hamburger (top right corner) and “Made with Streamlit” footer, do this :

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

Enjoy !!!

23 Likes

Thanks It really helps!!!

Is there way to actually edit the footer note?

Yes check this work around

footer {
	
	visibility: hidden;
	
	}
footer:after {
	content:'goodbye'; 
	visibility: visible;
	display: block;
	position: relative;
	#background-color: red;
	padding: 5px;
	top: 2px;
}
5 Likes

It worked perfectly :slight_smile:

1 Like

Instead of goodbye, I like to put a hyperlink text there. How can I do that?

1 Like

Have you found a solution to add a link or email?

Hi, it is not diffcult to achieve it, just add some code like this

footer="

<style> your css code put here</style>

<div class='footer'>

<p>the word you want to tell<a style='display:block;text-align:center;' 

href='https://www.streamlit.io' target='_blank'>your email address put here</a></p>

</div>"

st.markdown(footer, unsafe_allow_html=True)
2 Likes

Yes, I have. This is how I have configured the footer with photo and link: rafisics/suvat_calculator · GitHub
And the output is here: https://suvat-calculator.herokuapp.com/

2 Likes

#----------------------Hide Streamlit footer----------------------------
hide_st_style = “”"

#MainMenu {visibility: hidden;}
footer {visibility: hidden;}
header {visibility: hidden;}

“”"
st.markdown(hide_st_style, unsafe_allow_html=True)
#--------------------------------------------------------------------

That worked for me, thank you.
Is there a way to replace the “About” one from the hamburger icon?

1 Like

You’re welcome.
If you meant to replace/remove the “About” section in the hamburger menu of the upper right corner, I am not sure.

Hi @rafisics,

Here’s an unofficial CSS hack you can use to hide the hamburger menu: How do I hide the hamburger menu from my app? - Streamlit Docs

Best, :balloon:
Snehan

2 Likes

wow thanks bro!! great help!!

For anyone wanting to replace the “Made with Streamlit” with you own text…

html_string='''
<script>
// To break out of iframe and access the parent window
const streamlitDoc = window.parent.document;

// Make the replacement
document.addEventListener("DOMContentLoaded", function(event){
        streamlitDoc.getElementsByTagName("footer")[0].innerHTML = "Provided by <a href='https://yourwebsite.com' target='_blank' class='css-z3au9t egzxvld2'>Your Link Display Text Here</a>";
    });
</script>
'''
components.html(html_string)
1 Like

For some reason above solutions for footer removal does not work for me

same here. not working for me. is this broken now?

Here is a better way to hide it all:

hide_streamlit_style = """
            <style>
            [data-testid="stToolbar"] {visibility: hidden !important;}
            footer {visibility: hidden !important;}
            </style>
            """
st.markdown(hide_streamlit_style, unsafe_allow_html=True)
2 Likes

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.

The “Made with Streamlit” border has been removed as of Streamlit version 1.29.0. For anyone stumbling across this later, you can upgrade Streamlit to avoid doing this manually now.

1 Like