How To Remove “Made with Streamlit”, Hamburger Icon Menu & Streamlit Header

Introduction

If you’re looking to enhance the appearance of your Streamlit app, removing the default elements like the “Made with Streamlit” footer, the hamburger menu icon, and the header can greatly improve the user experience. This post outlines a simple method to achieve that using custom CSS.

Why Remove Default Elements?

Default elements can sometimes distract from the main content of your app. By removing these elements, you create a cleaner interface that allows your users to focus on the functionality of your application.

Code Snippet to Customize Your App

To remove the default footer and menu icon, you can add the following code snippet to your Streamlit app:

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

How to Implement the Code

Simply paste the code snippet above into your Streamlit app script. After saving and refreshing the page, you should see that the footer and menu icon have disappeared. Additionally, this code also hides the Streamlit header, creating a more streamlined look for your app.