Customize the streamlit sidebar navigation collapsed and expand button

[Jawad_Ahmed]

1. Are you running your app locally or is it deployed?
   Locally

2. If your app is deployed:
   a. Is it deployed on Community Cloud or another hosting platform?
   b. Share the link to the public deployed app.
   No deployed yet

3. Share the link to your app’s public GitHub repository (including a requirements file).
   It is local now

4. Share the full text of the error message (not a screenshot).
   I want to customize the default sidebar collapsed and expand button from cross to something else and also want to change its position from top left side to the center. Here is the basic code but I want exact code to change the position of sidebar collapsed and expand button

# Custom CSS for changing the sidebar color
custom_css = """
<style>
    [data-testid=stSidebar] {
        background-color: #0084FF !important;
    }
</style>
"""
# Apply custom CSS
st.markdown(custom_css, unsafe_allow_html=True)

# Streamlit app content, including the sidebar
with st.sidebar:
    pass

Here is the screenshot

Kindly share the solution how shall I customize the sidebar button to close and open.
5. Share the Streamlit and Python versions.
Python version is 3.10 and Streamlit version is 1.28.2

[dataprofessor]

Hi @Jawad_Ahmed

You’ve made a great start in this direction, congrats! To replace the cross to something else, you can try adjusting the CSS element data-testid="baseButton-header" and since it’s using SVG image of a cross, you can try replacing this with an alternative symbol. See this example (How to add SVGs with CSS (background-image) | SVG Backgrounds) on how to use an SVG image with CSS.

As for positioning this, check out the following for ideas on how:

CSS Layout - The position Property

As a complement, you can also check out this tutorial video for figuring out the CSS elements to modify as well as a demo showing how this is applied to obtain the desired effect (https://www.youtube.com/watch?v=gr_KyGfO_eU)

Hope this helps!