How to make the page not change when refreshing the web page?

🎈 Using Streamlit
1

I want to hide the stSidebarNav, here is the code:

import streamlit as st
from st_pages import Page, show_pages, hide_pages

def main():
    # st.set_page_config(initial_sidebar_state="collapsed")

    st.markdown(
        f"""
        <style>
            [data-testid="stSidebarNav"] {{
                background-repeat: no-repeat;
                height:0px;
                visibility:hidden;
            }}

        </style>
        """,
        unsafe_allow_html=True,
    )

    show_pages([
        Page("streamlit_app.py","test"),
        Page("function-demo/multi-pages/MyPages/main.py","main"),
        Page("function-demo/multi-pages/MyPages/page1.py","intro"),
        Page("function-demo/multi-pages/MyPages/page2.py","trial")
    ])
    st.write("In Page  test")

And it can hide the stSidebarNav.

But when refreshing the page, the Navigation bar will still show for a few seconds, and then disappear automatically.

How to make this “show second” disappear?

2

Hi @YaQiang :wave:

Have you tried to hide it via css this way?

import streamlit as st

st.set_page_config(initial_sidebar_state="collapsed")

st.markdown(
    """
<style>
    [data-testid="collapsedControl"] {
        display: none
    }
</style>
""",
    unsafe_allow_html=True,
)

Charly

3

Still has the “show time”.
It is just like the frame(streamlit) will render a default template, and then just run the Python code to change the default template to hide the stSidebarNav.
And the other methods also have this kind of feature——need a short “show time” to show the default UI logic, and then change to user-defined UI .

4

I’m not too sure – Maybe @blackary knows a special CSS trick for this? :slight_smile:

5

Nope, sorry – I don’t know a way to make the css instantly applied – you can see the same thing with the sections here https://st-pages-sections.streamlit.app/ – there’s a slight delay before the indentation happens.

1 Like
6

Is there another way to achieve the above effect without css, and can be instantly applied?

7

set the sidebar color to the same bg color of the app.