Sidebar layout change

[paulchainkang]

Summary

I am making a multiple page app. On the sidebar, st.sidebar.header(“Company name”) and st.sidebar.image(image) would put the “Company name” and the log below the names of Pages.

I would like to put the company name and logo on the top of sidebar, above the names of Pages. Anyone can help?

-paul

1_Page1.py:

import streamlit as st
from PIL import Image

image = Image.open("logo.png")
st.set_page_config(layout="wide")

st.header("This is Page1")

st.sidebar.header("Company name")
st.sidebar.image(image)

pages/2_Page2.py:

import streamlit as st

st.set_page_config(layout="wide")

st.header("This is Page2")

[alonsh]

You can do that using streamlit-extras
https://extras.streamlit.app/App%20logo

[paulchainkang]

Hi Alon,

Thank you for pointing me to the excellent streamlit-extras package. It works.

-paul

[jrieke]

FYI we’re also working on supporting this natively. But it’s going to take a bit since we are currently focusing on some other projects. streamlit-extras is a good hack in the meantime!

[paulchainkang]

Hi Johannes, it’s good to know you are working on supporting this natively. There are two limitations in add_logo() in streamlit-extras, if possible, please remove the limitations in the native support,

1. If I want to put some texts(like the company name) above or below the logo, my workaround is to add the text by editing the logo. It would be better to add the texts by Python codes.
2. Add_logo() uses URL paths, it would be better to use PIL’s image as well.

[al-yakubovich]

@jrieke Hi. Any updates about native support? streamlit-extras stopped working

[Radhika_Sachdev]

Hi @jrieke, I’ve added a logo at the top left corner of the sidebar in my multipage app. Now, when I try to scroll through pages, there is an overlap between the image and the pages mentioned in the sidebar. Is there a way to scroll through the content in a way such that the text remains below the image and there is no overlap?