Sidebar issues

[Francisco-Aros]

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?

[mathcatsand]

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.

[Francisco-Aros]

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.

[mathcatsand]

Try something like this:

import streamlit as st

st.sidebar.write('something')

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

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

[Francisco-Aros]

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.