Removing space before sidebar title

[rik]

I have an app with a series of buttons and checkboxes in a sidebar.
There seems to a large space before the title in the sidebar (as shown in screenshot).
I would like to know how I can reduce this space.
I have unsuccessfully tired the proposed solutions in the following links:

Reduce white space top of the page

Hi @Philip_Oosterholt , this seems to have been answered in Cheers

How to remove extra spacing before the title in streamlit?

Remove header whitespacing from Streamlit/Hydralit

Any form of help would be appreciated.

Screenshot of app:

The code is shown here:

# import modules
import streamlit as st

# configure sidebar text and widgets
st.sidebar.title("My App")
file = st.sidebar.file_uploader("Choose a file", key='a')
cb1 = st.sidebar.checkbox('1', key='b')
cb2 = st.sidebar.checkbox('2', key='c')
cb3 = st.sidebar.checkbox('3', key='d')
cb4 = st.sidebar.checkbox('4', key='e')
cb5 = st.sidebar.checkbox('5', key='f')
cb7 = st.sidebar.checkbox('6', key='g')
cb8 = st.sidebar.checkbox('7', key='h')
cb9 = st.sidebar.checkbox('8', key='i')
cb10 = st.sidebar.checkbox('9', key='j')
start_btn = st.sidebar.button('Run', key='k')
st.sidebar.text("")

[dataprofessor]

Hi @rik,
You can make use of this unofficial CSS hack by adding the following to your Streamlit app:

st.markdown("""
  <style>
    .css-o18uir.e16nr0p33 {
      margin-top: -75px;
    }
  </style>
""", unsafe_allow_html=True)

You can have a look at the code and demo here:

• The GitHub repo is at GitHub - dataprofessor/st-demo-sidebar-whitespace
• Demo app https://dataprofessor-st-demo-sidebar-whitespace-streamlit-app-mlhzjx.streamlitapp.com

[rik]

@dataprofessor Thank you for the help.
I tried your solution, but the space still has not been reduced.
I tried with a local host and also deployed it.
Here is a link: https://yeetswa-sidebar-test-ngrfhi.streamlitapp.com/

I tried using python 3.9 and 3.10, but still the same result.
Any ideas as to why I could not correctly implement your solution?

[dataprofessor]

Hi @rik,

I went to your provided link and in Google Chrome, I clicked on View → Developer → Inspect Elements
and the following is what I see:

And it seems that the CSS element name for the ``stMarkdownContainerwas different for the app that you and I deployed (however the last segment seems to be the samee16nr0p33`.

Therefore, could you try adding the following instead:

st.markdown("""
  <style>
    .css-13sdm1b.e16nr0p33 {
      margin-top: -75px;
    }
  </style>
""", unsafe_allow_html=True)

Please let me know if this works

[rik]

Hi @dataprofessor,

Yes, that seems to have worked. However, the CSS element name for the stMarkdownContainer was different for me to the one you specified in your code. Appreciate the help.

Here is the code:

st.markdown("""
  <style>
    .css-znku1x.e16nr0p33 {
      margin-top: -75px;
    }
  </style>
""", unsafe_allow_html=True)