Move text to absolute top of the page

[Yash_Sharma1]

I have this text which I want to move to the absolute top of the screen next to the sidebar arrow. I’ve tried to use HTML, but it hasn’t worked. How can I do this?

[coder]

This code will help you achieve that:

import streamlit as st
st.set_page_config(page_title='First app', page_icon="📊", initial_sidebar_state="expanded", layout='wide')
from streamlit.components.v1 import html
st.sidebar.image("https://picsum.photos/200")
with st.container():
    st.text("This is paragraph :)") 
    html("""
    <script>
        // Locate elements
        var decoration = window.parent.document.querySelectorAll('[data-testid="stDecoration"]')[0];
        var sidebar = window.parent.document.querySelectorAll('[data-testid="stSidebar"]')[0];
        // Observe sidebar size
        function outputsize() {
            decoration.style.left = `${sidebar.offsetWidth}px`;
        }
        new ResizeObserver(outputsize).observe(sidebar);
        // Adjust sizes
        outputsize();
        decoration.style.height = "3.0rem";
        decoration.style.right = "45px";
        // Adjust text decorations
        decoration.innerText = "Welcome, Streamlit App!"; // Replace with your desired text
        decoration.style.fontWeight = "bold";
        decoration.style.display = "flex";
        decoration.style.justifyContent = "center";
        decoration.style.alignItems = "center";
        //decoration.style.fontWeight = "bold";
        //decoration.style.backgroundImage = "none"; // Remove background image
        //decoration.style.backgroundSize = "unset"; // Remove background size
    </script>
""", width=0, height=0)

[Yash_Sharma1]

Thank you. It works perfectly.

[Yash_Sharma1]

Do you know how to make the text disappear after it’s clicked?

[coder]

Yes, of course. This is the updated code:

import streamlit as st
st.set_page_config(page_title='First app', page_icon="📊", initial_sidebar_state="expanded", layout='wide')
from streamlit.components.v1 import html
st.sidebar.text("menu options")
html("""<script>
        var decoration = window.parent.document.querySelectorAll('[data-testid="stDecoration"]')[0];
        var isVisible = true;

        function toggleVisibility() {
            isVisible = !isVisible;
            //decoration.style.display = isVisible ? "flex" : "none";
            decoration.innerText = isVisible ? "Welcome, Streamlit App!" : "";
        }

        // Locate elements
        var sidebar = window.parent.document.querySelectorAll('[data-testid="stSidebar"]')[0];

        // Observe sidebar size
        function outputsize() {
            decoration.style.left = `${sidebar.offsetWidth}px`;
        }

        new ResizeObserver(outputsize).observe(sidebar);

        // Adjust sizes
        outputsize();
        decoration.style.height = "3.0rem";
        decoration.style.right = "45px";

        // Adjust text decorations
        decoration.innerText = "Welcome, Streamlit App!";
        decoration.style.fontWeight = "bold";
        decoration.style.display = "flex";
        decoration.style.justifyContent = "center";
        decoration.style.alignItems = "center";

        // Add click event listener
        decoration.addEventListener("click", toggleVisibility);
    </script>
""", width=0, height=0)

[Yash_Sharma1]

Sorry. To clarify when the X on the sidebar is clicked.