How to target data-testid="stSidebarNavItems" with CSS

Using Streamlit
1

As per title.

I am trying to change the on hover color for the data-testid=“stSidebarNavItems”. I am using st.navigation to create the sidbar links.

I tried all the option, but nothing seems to be working?

2

To highlight individual page links on hover:

div[data-testid="stSidebarNav"] ul[data-testid="stSidebarNavItems"] li a[data-testid="stSidebarNavLink"]:hover {
    border: red solid 2px;
}

image
image923×409 14.9 KB

3

Thanks very much :smiley: It works, but not for the text color?

Also, how can I target the color of active/selected nav button? Probably simple question, but I have very little basic understanding of CSS.

div[data-testid="stSidebarNav"]
ul[data-testid="stSidebarNavItems"]
li a[data-testid="stSidebarNavLink"]:hover {
    background-color: #9e2929;
    font-size: 1.02em;
    color: white !important;
}
4

You’ll need to target the span tag inside the a tag from the previous css snippet:

div[data-testid="stSidebarNav"] ul[data-testid="stSidebarNavItems"] li a[data-testid="stSidebarNavLink"]:hover span {
    color: rebeccapurple;
    font-weight: bold;
}

image
image960×540 15.5 KB

That one is not simple at all because there is no nice CSS selector to identify which item of that list of pages is the current one.

1 Like
5

thanks edsaac, appreciate your help!

I will keep digging to see if I can find a solution for “on active color change” as it would be nice to have for what I am working on atm.

1 Like
6

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