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

[Michal_Frankowski]

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?

[edsaac]

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;
}

[Michal_Frankowski]

@edsaac

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

Thanks very much 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;
}

[edsaac]

@Michal_Frankowski

not for the text color?

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;
}

---

@Michal_Frankowski

how can I target the color of active/selected nav button? Probably simple question …

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.

[Michal_Frankowski]

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.