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

šŸŽˆ Using Streamlit
1

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, ā€¦ā€:

grafik
grafik772Ɨ654 24.3 KB

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

Best wishes,
Cord

2

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

3

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?

4

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

5

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:

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

8 Likes
7

Works like a charm, thanks :wink:

1 Like
8

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 ?

9

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

or

st.sidebar.multipage_menu(my_caption)

or

col1.multipage_menu(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

2 Likes
10

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.

1 Like
11

Hello Streamlit community
I am looking for the same problem, I want to push mu logo and title at the top in streamlit application. I tried CSS solution, but it wonā€™t work for me maybe I am mistaking it. Could you please help to solve this?

Here is the screenshot of my application

Capture
Capture1831Ɨ821 89.5 KB

I want to reduce the white space from top for the logo and the title.
Any help is appreciated!
Thanks

Thanks

12

@Priti_Asolkar If youā€™re interested, there is a component for this as part of streamlit-extras https://extras.streamlit.app/App%20logo. There will be a release shortly that will support local image files, but it should work already with urls.

1 Like
13

I have been using the solution provided by @blackary and itā€™s been working well, but Iā€™ve noticed that if I have something on the sidebar, like an input widget, and the screen is small enough, when scrolling through the menu, the links will be covered by the logo. Is it possible to get the logo to scroll with the rest of the menu if the need to scroll is present? Alternately, could text that goes ā€œbelowā€ the image be hidden?

1 Like
14

Hi,
Do we have any news on this?
I have been using @blackary solution, but I noticed that if I add this piece of code on top of every page It is very jumpy when moving from page to page and that kinda bothers me.
I add the @st.cache_data right before the definition of the add_logo() function but still no luck. It is very jumpy, is annoying.

15

Thanks a lot! But where do I have to place the file with that function? I have added a logo.py file with that function inside the main folder, but this is not working.

16

Youā€™ll have to call add_logo on every page that you want a logo on

17

Thanks. So I have to place that function on every page? I thought I could add it to one file and then just call the function with add_logo()

18

You need to call add_logo() on every page. Whether you do that by calling add_logo() directly, or calling a function that calls add_logo(), it doesnā€™t matter.

19

Yes, I understand. But where do I have to add the file with that kind of global function? Inside the page folder? Sorry for my stupid question, but I am still learning Python.

20

Hereā€™s one structure that would work:

my_logo.jpeg

utils.py

from streamlit_extras.app_logo import add_logo

def logo():
    add_logo("my_logo.jpeg", height=300)

from

streamlit_app.py

import streamlit as st
from utils import logo

logo()

st.write("Other stuff")

pages/page1.py

import streamlit as st
from utils import logo

logo()

st.write("Other stuff for page1")
1 Like