Removing sidebar faster

🧩 Streamlit Components
1

Hello, to remove the sidebar, I currently use

st.set_page_config(
	page_title=title,
	initial_sidebar_state="collapsed",
	page_icon=icon,
)

It works very often. However, it sometimes hangs and the sidebar is visible for about 4 seconds. Can anyone explain why it sometimes takes so long? I don’t want the user to be able to click on the side bar and 4 seconds is too long.

2

Hi @endsley

Is this a multi page app, otherwise if no elements were assigned to the sidebar (e.g. via st.sidebar.write()) it should not be displayed.

Another way is to customize the CSS so that the sidebar is hidden permanently. Check out the following YouTube video for a walkthrough on how to implement this:

Best regards,
Chanin

3

Hello

Thank you for the response. Yes, it is a multipage site. However, I want to control the flow of the page switch, so I don’t want users to be able to jump to a random page.

After looking through your video, I get that I can write a CSS file, use the CSS to disable the sidebar element, and load the CSS file in the code.

The issue that I have is the element name of the div. Since it only appears for 3 seconds, i can’t seem to find it. Should it still be there in the code? After I disable it?

4

If you put the CSS selector at the beginning, does it still take long to hide the sidebar?

st.markdown(
    """
    <style>
    [data-testid="stSidebar"]{
        visibility: hidden;
    }
    </style>
    """, 
    unsafe_allow_html=True
)

That would be [data-testid="stSidebar"].