Add branding to my header

Using Streamlit
, ,
1

I would like to add an icon and application title to my streamlit header. The icon and title should be at the same level as the toolbar, but right aligned above the sidebar.

I managed to mock up something for the icon using the code below. I don’t like it very much, because it uses hard coded pixel values to push the sidebar down. I also don’t know how to add an application title.

Who knows how add text to the right of the icon? Any suggestions for improvements (especially so I don’t have to use hard coded pixel values) would be appreciated.

import streamlit as st

st.markdown("""
<style>
:root {
  --header-height: 50px;
  --header-height-padded: 59px;
}

[data-testid="stHeader"] {
    background-image: url(/app/static/icon.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-orgin: content-box;
    background-color: grey;
    padding-top: var(--header-height);
}

[data-testid="stSidebar"] {
    margin-top: var(--header-height-padded);
}

[data-testid="stSidebarCollapsedControl"] {
    margin-top: var(--header-height);
}

[data-testid="stSidebarUserContent"] {
    padding-top: 0rem;
}
</style>
""", unsafe_allow_html=True)

with st.sidebar:
    st.markdown("sidebar")

st.markdown("main")