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!

1 Like
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!