Login/out Button on top right and remove Deploy button

Using Streamlit
1

Hi, I am currently developing a chatbot app with Streamlit. I want to add user authentication function to my app.

As most apps layout, I want to put my user status/login&logout button at top right corner of the page. But currently, this position is occupied by Streamlit’s deploy button.

I searched for solutions on the forum. There are some methods to hide the deploy bar like setting toolbarMode = “minimal” in config.toml. But the top space is still occupied and I cannot put the login/logout button to the top right corner.

How can I properly implement it?

Thank you.

2

Try using

[ui]
hideTopBar = true

This should hide the actual running man icon that appears when you’re loading a page.

I’m seeing another foum post where this guy is proposing a css hack to remove the actual space if you’re looking to go that far Remove UI Top Bar/Forehead

3

I tried your approach and get the following warning in the terminal (when ran locally), so I’m guessing its not/no longer supported, but I can confirm it does work

“ui.hidetopbar” is not a valid config option. If you previously had this config option set, it may have been removed.

4

You could try to overlay the default header with your own custom container.
Check the st_yled studio app for an example.

For this I added a simple container with key in my main.py/app.py

(I use the st_yled package but your can just exchange with regular Streamlit element (st.container)

sticky_header = st_yled.container(
    key="sticky-header",
    horizontal=True,
    vertical_alignment="center",
)

with sticky_header:
    
        st_yled.button("Export to your app", ....)

Then use the following css to set the container to foreground, with absolute position 0

.st-key-sticky-header {
    position: absolute;
    top: 0;
    z-index: 9999;
    max-width: 704px;
    padding: 8px 0px;
    height: 56px;
    background-color: transparent;
}

Hope this helps!

5

I tried your approach but still nothing appears on the default header and no errors as while running.

I am trying to add the logged-in username info on the top header but nothing seems to appear.

i am using the below code to test.

def main():

st.set_page_config(

    page_title="Streamlit_App_to_test_SSO", layout="wide"

)

st.markdown(

"""

<style>

.st-key-sticky-header {

    position: absolute;

    top: 0;

    right: 0;

    left: 0;

    z-index: 9999;

    height: 56px;

    padding: 8px 16px;

    background-color: transparent;

    pointer-events: none;

}

.st-key-sticky-header \* {

    pointer-events: auto;

}

</style>

""",

unsafe_allow_html=True,

)

# Container

if HAS_STYLED:

   print(" inside sticky header true...")

   sticky_header = st_yled.container(

    key="sticky-header",

    horizontal=True,

    vertical_alignment="center",

)

else:

    sticky_header = st.container()

    print(" inside sticky header false...")



with sticky_header:

  col_spacer, col_user = st.columns(\[8, 2\])



  with col_spacer:

    st.write("")



  with col_user:

    st.markdown(

        f"""

        <div style="text-align:right;font-weight:600;">

            {user\['name'\]}

        </div>

        """,

        unsafe_allow_html=True,

    )

–- rest of my other code

6

Hey Pavithra5

I think I see your issue:
You may need to increase the z-index for the header. In my case I disabled the stAppToolbar (the header that contains the small Streamlit menu). The stAppToolbar has a z-index of 999990, so you need to set a z-index higher than that for the sticky header, otherwise the Toolbar will overlay the header.

I tried to reproduce your issue and changed the z-index, which resolved the problem in my case.

(BTW it is recommended to run st_yled.init() on each app page, otherwise st_yled components where no explicit key is specified won’t work)

Here the code I used:

st.set_page_config(
    page_title="Streamlit_App_to_test_SSO", layout="wide"
)

st_yled.init()

HAS_STYLED = True

st.markdown(
"""
<style>
.st-key-sticky-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999991;
    height: 56px;
    padding: 8px 16px;
    background-color: transparent;
    pointer-events: none;
}

.st-key-sticky-header \* {
    pointer-events: auto;
}

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

if HAS_STYLED:

   print(" inside sticky header true...")

   sticky_header = st_yled.container(
    key="sticky-header",
    horizontal=True,
    vertical_alignment="center",
)

else:

    sticky_header = st.container()
    print(" inside sticky header false...")


with sticky_header:

  col_spacer, col_user = st.columns([8, 2])

  with col_user:
     st.write("User: **test_user**")