How to add a title at the top middle of the page

[edsaac]

Using version 1.40, I would:

1. Wrap the title in a st.container and assign a key to target the CSS styling
2. Set the background of the header transparent and reduce the top padding of the main app
3. Style the title using the key from step 1

Mode	Sidebar open	Sidebar closed
Light
Dark

Code:

my_app.py

import streamlit as st

with open("style.css") as css:
    st.html(f"<style>{css.read()}</style>")

with st.container(key="app_title"):
    st.title("My Unique Title App")

st.logo(
    "https://placehold.co/600x60?text=XD+Long+Logo",
    icon_image="https://placehold.co/60x60?text=XD",
)

st.title("A small title for a section")
st.header("A header")
st.subheader("A subheader")
st.write("A repeated paragraph" * 50)

with st.sidebar:
    st.title("A sidebar title")
    st.header("A sidebar header")
    st.subheader("A sidebar subheader")

style.css

header.stAppHeader {
    background: rgba(0, 0, 0, 0);
}

div.stMainBlockContainer {
    padding-top: 0.2rem;
}

div.st-key-app_title div.stHeading {
    text-align: center;
}

div.st-key-app_title div.stHeading h1 {
    font-family: monospace;
    letter-spacing: -5px;
}