Hide titles link

Good day.

First of all, I want to thank all for the magnificent tool that Streamlit is.

I was wondering if there is a way to hide the little clip symbol that appears next to the titles.
The reason for this is that when someone clicks its, it changes the http direction of the app

Example:
-before clicking:
https://share.streamlit.io/tylerjrichards/streamlit_goodreads_app/books.py
-after clicking:
https://share.streamlit.io/tylerjrichards/streamlit_goodreads_app/books.py#analyzing-your-goodreads-reading-habits

I need to turn this off because I have styled my app with lot of css code and this feature is interfering with the global behavior.

Thanks in advance for you help!

Unfortunately, I don’t think we accounted for that behavior. By default, if you don’t provide a value for the anchor parameter, then it looks like the code chooses for you.

Could you open a GitHub issue to highlight your use case? You could probably also hide that element using CSS, since you’re already hacking on it anyway.

Best,
Randy

Hi Randy,

thank you very much for your prompt response.

Indeed I could achieve it with CSS. If anyone wants to hide that link button you just need to include the following in your script:

st.markdown("""
.css-m70y {display:none}
“”", unsafe_allow_html=True)

2 Likes

The CSS got changed though, the updated code would be as follows:

def hide_anchor_link():
    st.markdown("""
        <style>
        .css-15zrgzn {display: none}
        </style>
        """, unsafe_allow_html=True)

@randyzwitch @geoffrygeorge I just tried to utilize this code (I presume this button universally hides the link code, which is not great, but at least should make it go away) but after implementing the markdown, the link button doesn’t seem to be hidden.

The issue in particular I am trying to solve is that I have a Blog written in Streamlit and I use the st.title in the overall header of the website. The anchor function is causing the link button to be present whenever someone highlights over the website title, which isn’t really desirable. The link button continues to persist, even if I use st.header, st.subheader, or even st.markdown or st.write with # defined headers.

Seems like someone really really wanted anchors to permeate through every aspect of Streamlit but in truth, they aren’t universally needed. Was a “disable anchors” option considered?

See below for a snippet from my live blog.

I’ve even got anchors where they really have no business being, like directly on top of links. :grinning:

@theimposingdwarf I believe I have understood your concern here.

I use three themes for my Streamlit app and because CSS is being generated dynamically, the code for the particular CSS class changes as well, obviously. The CSS class of these links changes dynamically with respect to the theme used.

Check out the below code where I have added all the three classes of the link corresponding to a theme that I use.

def hide_anchor_link():
    st.markdown("""
        <style>
        .css-15zrgzn {display: none}
        .css-eczf16 {display: none}
        .css-jn99sy {display: none}
        </style>
        """, unsafe_allow_html=True)

Note: The classes might be different for you depending on the theme that you use.

Finding these classes is a bit of a pain but it’s worth it. :sweat_smile:

This disables the link universally if succeeded in implementing the code correctly.

2 Likes

Since Streamlit CSS is generated dynamically, it’s not always stable to hard-code specific CSS classes for any theme to do anything (in this case, hiding the anchors). Instead, we can write the CSS using the > selector in CSS as such:

def hide_anchor_link():
    st.markdown(
        body="""
        <style>
            h1 > div > a {
                display: none;
            }
            h2 > div > a {
                display: none;
            }
            h3 > div > a {
                display: none;
            }
            h4 > div > a {
                display: none;
            }
            h5 > div > a {
                display: none;
            }
            h6 > div > a {
                display: none;
            }
        </style>
        """,
         unsafe_allow_html=True,
)

Cheers!

1 Like

Thanks, it helped in my case also.

1 Like

This is great!

This solved it for me! Cheers :slight_smile:

2 Likes