pythonstreamlit

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

I am using the new multipage feature and would like to style my multipage app and put a logo with a title on top of/before the page navigation.

Here's a small example tested on Python 3.9 with streamlit==1.11.1 in the following directory structure:

/Home.py
/pages/Page_1.py
/pages/Page_2.py

Home.py:

import streamlit as st


st.sidebar.markdown(
    "My Logo (sidebar) should be on top of the Navigation within the sidebar"
)

st.markdown("# Home")

Page_1.py:

import streamlit as st

st.markdown("Page 1")

Page_2.py:

import streamlit as st

st.markdown("Page 2")

which I can run using:

$ streamlit run Home.py

But this leads to the Text printed below and not above the navigation: enter image description here

Is there any way to do this? Any hints are welcome!

Best wishes, Cord

Solution

  • One option is to do it via CSS, with a function like this:

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

    And then just call that function at the top of each page. That produces an effect like this: enter image description here