Hide titles link

[SantiagoBF]

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!

[randyzwitch]

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

[SantiagoBF]

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)

[geoffrygeorge]

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)

[theimposingdwarf]

@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.

[geoffrygeorge]

@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.

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

[natecooperjones]

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!

[Mushtaq_Patel]

Thanks, it helped in my case also.

[geoffrygeorge]

This is great!

[lorenzweb]

@geoffrygeorge

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

This solved it for me! Cheers

[Taanis_Karigar]

This still doesn’t work for me, any other suggestions?

[blackary]

The css classes will change over time, but this worked for me on streamlit 1.22.0

import streamlit as st

st.title("This is a title")

st.markdown("""<style>.css-zt5igj svg{display:none}</style>""", unsafe_allow_html=True)

[Taanis_Karigar]

This worked for me !

st.markdown("""
    <style>
    /* Hide the link button */
    .stApp a:first-child {
        display: none;
    }
    
    .css-15zrgzn {display: none}
    .css-eczf16 {display: none}
    .css-jn99sy {display: none}
    </style>
    """, unsafe_allow_html=True)

[natecooperjones]

Updated code working as of Streamlit 1.33.0:

st.html(
    body="""
        <style>
            /* hide hyperlink anchors generated next to headers */
            h1 > div > a {
                display: none !important;
            }
            h2 > div > a {
                display: none !important;
            }
            h3 > div > a {
                display: none !important;
            }
            h4 > div > a {
                display: none !important;
            }
            h5 > div > a {
                display: none !important;
            }
            h6 > div > a {
                display: none !important;
            }
        </style>
    """,
)

[edsaac]

Is not this accomplished by setting anchor=False in st.title, st.header and st.subheader?

st.title - Streamlit Docs

[Goyo]

Indeed it does for st.title, st.header and st.subheader. For markdown you need to add css, I think.

[natecooperjones]

100%, but if you are trying to use H4-H6, there is no Streamlit equivalent and thus you have to use the CSS:

st.markdown('# Header 1')  # same as ``st.title``
st.markdown('## Header 2')  # same as ``st.header``
st.markdown('### Header 3')  # same as ``st.subheader``
st.markdown('#### Header 4')  # no Streamlit equivalent
st.markdown('##### Header 5')  # no Streamlit equivalent
st.markdown('###### Header 6')  # no Streamlit equivalent

It would be great if st.subheader took in a parameter to allow you to specify which header level you’d like to use (e.g. H3, H4, H5, H6) so we wouldn’t need to inject that custom CSS at all!

[CorpulentClaxon]

I noticed that when using the display: none; property on classes such as .stApp a:first-child, as some of the others suggested, it will also remove anything related to a link. I found out that this css seems to achieve the same result, but with less restrictions on other elements in the code

div[data-testid="StyledLinkIconContainer"] > a:first-child {
            display: none !important;
        }

I tried to steer away from dynamic css classes as they will inevitably break in the future when things change. Hope that this might help or inspire some of you to find out the best way possible