Adding widgets to sidebar hides the page navigation

I have an app with three pages. I added two text input widgets in the sidebar that are being preserved across all three pages using session state as shown below. However, this causes the page navigation to be slightly hidden by the widgets (with an expander, but I’d like to avoid that if possible.)

if 'project' not in st.session_state:
   value_project = ""
else:
    value_project = st.session_state['project']
if 'email' not in st.session_state:
   value_email = ""
else:
    value_email = st.session_state['email']
st.sidebar.text_input('Project name', value=value_project, key='project')
st.sidebar.text_input('Email address', value=value_email, key='email')

Is there any way to push the widgets to the bottom of the sidebar to avoid them overlapping with the page navigation? Or move the widgets above the page navigation?

There is a guide on how to post properly especially if you have issues encountered.

You can increase the minimum height of the navigation section with css. At the end of your page, add:

css='''
[data-testid="stSidebarNav"] {
  min-height: 50vh
}
'''
st.markdown(f'<style>{css}</style>', unsafe_allow_html=True)

Thank you, that works great!!

1 Like

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.