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!
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
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?)
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.
background-position: 20px 20px;
content: "My Company Name";
Works like a charm, thanks
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 ?
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)
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!?
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.
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
I want to reduce the white space from top for the logo and the title.
Any help is appreciated!
@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.
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?