Put logo and title above/on top of page navigation in sidebar of multipage app

Using Streamlit
21

Hi @blackary. I’ve noticed that the naming convention in the latest release of Streamlit has changed: the data-testid is no longer stSidebarNav but instead stSidebar. This change has meant that your add_logo function does not work in this Streamlit release.

I believe the the updated code should be:

st.markdown(
        f"""
            <style>
                [data-testid="stSidebar"] {{
                    background-image: url(http://placekitten.com/120/120);
                    background-repeat: no-repeat;
                    padding-top: 80px;
                    background-position: 20px 20px;
                }}
            </style>
            """,
        unsafe_allow_html=True,
    )
2 Likes
22

Thanks! Wanna make a PR to contribute that to streamlit extras?

1 Like
23

@blackary Yes, I’d be happy to. Will get that done shortly.

2 Likes
24

How can I add an image from a Google Drive Folder? Adding the shared link as the image path is not working.

1 Like
25

You’ll have to make sure the link is publicly viewable for the world. I’m not sure if this is up-to-date, but something like this should work Embedding a Google Drive image in HTML - DEV Community

2 Likes
26

@blackary Works like a charm. Thx!

2 Likes
28

Hi @blackary. app_logo from streamlit_extras does not show up.

29

Hi @al-yakubovich could you share an example repo where you’re using it in Issues · arnaudmiribel/streamlit-extras · GitHub, please?

30

Capture
Capture1514×441 24.3 KB

@blackary trying the same approach but getting the error above, what am i missing? appreciate your help.

Thanks!

31

There is a bug in your code where you are assigning a function to st.

1 Like
32

Figured it out. Thanks!

33

Since version 1.35.0, we have st.logo:

3 Likes
34

st.logo is great, if you need more control over the style, here’s a solution based on the stSidebarHeader:

def get_base64_of_bin_file(png_file: str) -> str:
    with open(png_file, "rb") as f:
        return base64.b64encode(f.read()).decode()


@st.cache_resource
def build_markup_for_logo(png_file: str) -> str:
    binary_string = get_base64_of_bin_file(png_file)
    return f"""
            <style>
                [data-testid="stSidebarHeader"] {{
                    background-image: url("data:image/png;base64,{binary_string}");
                    background-repeat: no-repeat;
                    background-size: contain;
                    background-position: top center;
                }}
            </style>
            """


st.markdown(
    build_markup_for_logo("static/logo.png"),
    unsafe_allow_html=True,
)
1 Like