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

🎈 Using Streamlit
6

One option is to use CSS, as @sebastiandres suggested. It’s a big hacky, but if you make this function, and call it on each page, it will give you this behavior. Note that depending on the size of your logo, you would want to change various numbers on this, but it should point you in the right direction.

def add_logo():
    st.markdown(
        """
        <style>
            [data-testid="stSidebarNav"] {
                background-image: url(http://placekitten.com/200/200);
                background-repeat: no-repeat;
                padding-top: 120px;
                background-position: 20px 20px;
            }
            [data-testid="stSidebarNav"]::before {
                content: "My Company Name";
                margin-left: 20px;
                margin-top: 20px;
                font-size: 30px;
                position: relative;
                top: 100px;
            }
        </style>
        """,
        unsafe_allow_html=True,
    )

image

11 Likes