Sidebar issues

Hello good afternoon, I have a question.

It turns out that I am creating a website in python code with VSCode, in this website I have a total of 5 tabs in which users can navigate.

The names of these 5 tabs are displayed on the left sidebar of the web page,
but in this sidebar I also add a small informative text and by adding it a horizontal line is created that separates both types of content, causing the 5 names of my tabs to not be fully displayed and only 3 of them are visible.

What modification can I make so that this horizontal line is seen below and the users of my website can see all the names of the tabs to which they can enter?

Can you share your repository and screenshots of your app? If I am understanding your description correctly, you will need to mess with a little custom CSS. By default, when there is content in the sidebar besides the multipage navigation, then the navigation will get cropped with an expander-like element and turned scrollable if it is very long. It’s all still there, you just need to expand/scroll to get to the additional pages.

If I can see exactly what your menu looks like, I can suggest the CSS to nudge things around appropriately.

Of course, here I share the repository with which I am working GitHub - Francisco-Aros/Chucao_1: Datos con información histórica del Chucao

And a screenshot of my app Screenshot - a54303b24adc08697ae726c06c157970 - Gyazo

As you can see, on the left side of the sidebar,
Only the first 3 names of my tabs can be seen clearly and I want users to be able to see the total of these names. As I am still creating the web, I have added two tabs that are still without information about which one of them I will use,
while in the last one I am using it to test some codes when necessary.

I have tried to move the horizontal line down using css, but I have not been able to do it.

P.S. Excuse my English, I don’t handle the language very well.

Try something like this:

import streamlit as st


css = '''
    [data-testid='stSidebarNav'] > ul {
        min-height: 50vh;

st.markdown(css, unsafe_allow_html=True)

Also here’s another post with some Sidebar editing that came to mind (in case there’s anything relevant): How to change the location of multipage buttons? - #4 by mathcatsand

1 Like

Thank you very much, I have achieved what I wanted, I had tried in various ways, but I had not succeeded. But with your help I did it, thank you very much.

1 Like

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