CSS Coding for Slider Bar

Using Streamlit
,
2

Hi @ryanlampkin,

You can definitely make adjustments to the CSS via a “hack” by embedding CSS code (and also HTML codes) and unsafe_allow_html=True as input argument to the st.markdown() function. There’s a lively discussion about this here [1].

I’ve also used this approach to add a top navigation bar to Streamlit apps as shown in this video [2] this repo [3].

For your particular use case, I would recommend to inspect the names of the CSS elements in Google Chrome using View > Developer > Inspect Elements to figure out which elements needs to be altered.

Links:

  1. Are you using HTML in Markdown? Tell us why!
  2. Is it Possible to Add a Navigation Bar to Streamlit Apps? | Streamlit #29 - YouTube
  3. GitHub - dataprofessor/streamlit_navbar

Hope this helps :smile:

1 Like