Remove "Made with Streamlit" from bottom of app

🎈 Using Streamlit
1

Is there a way to remove or better yet, customize the " Made with Streamlit" comment at the bottom of the app pages?

Thanks.

6 Likes
2

There is a github issue currently for removing the hamburger menu.

Hamburger Menu:

image
image716×770 22.9 KB

The github issue.

I don’t see one for removing “made with streamlit”. I suggest making a github issue.

1 Like
3

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
4

Thanks It really helps!!!

5

Is there way to actually edit the footer note?

6

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
7

It worked perfectly :slight_smile:

1 Like
8

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

1 Like
9

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

10

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
11

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
12

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

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

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

13

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

1 Like
14

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.

15

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
16

wow thanks bro!! great help!!

17

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
18

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

19

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

20

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