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,
    )
22

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

23

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

24

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

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

26

@blackary Works like a charm. Thx!

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.

32

Figured it out. Thanks!

33

Since version 1.35.0, we have st.logo:

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,
)