How to make a Title in the top center of the page

Using Streamlit
1

Hi,
I’m trying to set a tile in the top center of the page , it is working with this code :

st.markdown("<span class='custom-title'>Title</span>", unsafe_allow_html=True)
.custom-title {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px;
    z-index: 99999999;
    text-align: center;
    font-family: monospace;
    letter-spacing: -.99px;
    font-family: Inter;
    font-size: 19px;
    padding-top: 24px;
    font-weight: 700;
    line-height: 120%;
    
}

the result :

image
image1915×301 4.81 KB

but the drawback of this code is I cannot click to close the sidebar anymore because of this css attribute z-index: 99999999;

when I try to remove the z-index: 99999999; from the css class , the Title disapeared. Could you help please to resolv this issue ?
thanks

2
3

Hi,
thanks,
wher’s the style.css ?

4

In the example, the CSS file is in the current working directory. However, you can also inject it directly instead of through a file.

The example reads the CSS with the with open statement. You can name or locate the CSS file wherever if you modify that line accordingly. Alternatively, you can put the CSS directly into a string in your app, skip the with open, and directly feed the CSS into st.html.

5

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.