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

Hi there,

I am using the new multipage feature and really like it so far.

Now I would like to style my multipage app and put a logo with a title on top of/before the page navigation in the sidebar. To stick with the documentation, I want to include the logo before “Home, …”:

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

Best wishes,
Cord

Hi! You could create a helper’s function on a file (not on pages/) and call it on the top of each file.

Thanks for your hint. This was actually also my first approach but it did not work or I haven’t done it in the right way.

Here is a minimal example you could have a look into and/or fork: GitHub - ckaldemeyer/streamlit-multipage: Example to test streamlit's multipage functionality with a logo on top of the menu

Any hints?

Ohhh, I see, sorry I read too quickly and misunderstood your question. I thought you meant on the main canvas, not on the sidebar! :c

Yes, the “pages menu” will be on the top of the sidebar. Don’t think you can get around that (at least on a safe way. Maybe there’s a css trick to do it?)

I have asked this on SO now: python - Put logo and title above/on top of page navigation in sidebar of streamlit multipage app - Stack Overflow

Let’s see if someone else has an idea on how to solve this question :wink:

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

4 Likes

Works like a charm, thanks :wink:

1 Like

I can’t seem to get this to work with a local file.

I tried replacing
background-image: url(http://placekitten.com/200/200); with the name of my local file (in my app’s main page directory) as well as the relative path but it didn’t work for me.

Also searched for “css background-image local file” and used the format ../.. I found here, but did not work as well.

There was a solution on the stack overflow question that seems to work, but I was hoping for a css only solution, any ideas ?

Hi Nathan,

the answer on Stackoverflow was my adaption in order to serve local files which streamlit does not per default. Let me know if you find a better solution.

From my point of view, the cleanest solution would be to make the “multipage menu” a regular streamlit component in order to place it in the sidebar or canvas like other components.

For instance, it could be used like:

my_menu = st.multipage_menu(my_logo, my_caption)

or

st.sidebar.multipage_menu(my_logo, my_caption)

or

col1.multipage_menu(my_logo, my_caption)

and would only be rendered/available if a pages directory exists and holds valid pages.

I can imagine why the developers have implemented it as the first element in the sidebar due to page configuration, etc.

But maybe this could be changed in future versions as I am guessing many people would like to add logos on top of it or place it somewhere else!?

Best,
Cord

If you’re looking for a css-only solution, the best option is probably to upload the logo to a website somewhere (e.g. imgur.com) and use the url.