Removing the Github repo link in my app

☁️ Streamlit Community Cloud
1

Hi is it possible to remove the github icon displayed in the upper right hand corner of the app? Thank you.
image

2

In Streamlit, the GitHub icon in the upper right-hand corner of the app is displayed by default when running the app using Streamlit sharing. However, if you are running Streamlit locally or on your own server, the GitHub icon is not displayed.

Yes, it is possible to remove the GitHub icon displayed in the upper right-hand corner of a Streamlit app. There are two ways to do this:

  1. Make your GitHub repo private.This is the easiest way to remove the icon, but it will also prevent other users from viewing your code.
  2. Add custom CSS to your app.This will allow you to hide the icon without making your repo private. To do this, you will need to add the following CSS code to your app:
#GithubIcon {
  visibility: hidden;
}

You can place this code in a st.markdown() call, or you can add it to your app’s .css file.

Here is an example of how to use the CSS code:

import streamlit as st

# Add custom CSS to hide the GitHub icon
hide_github_icon = """
#GithubIcon {
  visibility: hidden;
}
"""
st.markdown(hide_github_icon, unsafe_allow_html=True)

# Your app code goes here

Once you have added the CSS code, the GitHub icon will be hidden from your app.

I hope this helps! Let me know if you have any other questions.

3

Thank you for the response. I tried your css sample but didn’t work in my end. Same with some changes. I just use the private setting in github. It was my understanding that streamlit app deployed in the streamlit server will not work if it set to private. Again thank you for the assist.

4

You are correct, if you set your GitHub repo to private, it will not work if you deploy your Streamlit app to the Streamlit Server. This is because the Streamlit Server needs to be able to access your code in order to run it.

If you want to keep your repo public and still hide the GitHub icon, you can try using a different CSS selector. The CSS selector you provided is specific to the GitHub icon, but there are other CSS selectors that you can use to target the entire MainMenu element. For example, you could try using the following CSS:

#MainMenu {
  visibility: hidden;
}

This will hide the entire MainMenu element, which includes the GitHub icon.

If you are still having trouble hiding the GitHub icon, you can try searching for other CSS selectors that target the GitHub icon. There are a number of resources available online that can help you with this.

5

But it works, I have tried it a browser that I never used to login into stream/github and I have other people access and able to use myapp.

6

This isn’t quite correct – if your repo is private, you can still host it on Community Cloud – it just won’t be publicly visible. You can share it with the world or with individual users this way Share your app - Streamlit Docs, and the source code can remain private.

1 Like
7

Removed the github link by:

hide_github_icon = “”"

.css-1jc7ptx, .e1ewe7hr3, .viewerBadge_container__1QSob, .styles_viewerBadge__1yB5_, .viewerBadge_link__1S137, .viewerBadge_text__1JaDK{ display: none; } #MainMenu{ visibility: hidden; } footer { visibility: hidden; } header { visibility: hidden; }

“”"
st.markdown(hide_github_icon, unsafe_allow_html=True)

1 Like
8

Hai @kingTwerk … I tried your css snippet… It is hiding the logo But, at the same time, it is also displaying the code itself in the app… Can I see your source code, so that I could understand it better?

9

This solved my issue :heart:… Same thing but helped me when I did it this way…

st.markdown(
    """
    <style>
    .css-1jc7ptx, .e1ewe7hr3, .viewerBadge_container__1QSob,
    .styles_viewerBadge__1yB5_, .viewerBadge_link__1S137,
    .viewerBadge_text__1JaDK {
        display: none;
    }
    </style>
    """,
    unsafe_allow_html=True
)
1 Like