How can I hide the Badges link in the sidebar?

I imagine that sidebar customisation will be added in due course, but for now I’d like to remove the “Badges” link, or at least hide it within “More…”

Should I just use CSS to hide it, for the time being?

I can’t quite work out the CSS. The divs containing the links are of class sidebar-section-link-wrapper with no id. When I try to hide the a tag with a.sidebar-section-link-badges { display: none; } it doesn’t hide anything.

2 Likes

Hello, in the hamburger menu I’ve used “nth-child” to do this kind of thing

1 Like

nth-child is very useful for many things, however in this case I think it’s probably dangerous. Since it’s based solely on numbers, for this it would require a guarantee that Badges will remain in the same position.

If something else is added/removed/moved before it, the position of Badges will change which could lead to Badges being revealed, something else being hidden and that may go unnoticed.

:has() is ideal for this, however sadly its support is still limited, notably it’s disabled by default in Firefox and is missing from many mobile browsers.

If hiding it isn’t critical for you, i.e. it’s acceptable to hide it where possible for best experience while being visible in browsers that do not yet support :has(), you can use the following selector:

sidebar-section-link-wrapper:has(a.sidebar-section-link-badges) { display: none; }
1 Like

Thanks for the ideas. I’ll likely do that for now. But I hope that ids can be added.

1 Like

Hello,

You can hide it with this. :slightly_smiling_face:

.sidebar-section-link-wrapper {
  .sidebar-section-link.sidebar-section-link-badges {
    display: none;
  }
}
6 Likes

I just copied and pasted this into my old theme component (which did the same with the old hamburger menu) and it just worked! Thank you very much, and thanks again to everybody else too.

3 Likes

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

Unfortunately this CSS doesn’t seem to be working with 2.9.0beta12… any ideas? :slight_smile:

This still works for me on the latest version.


Can you share your code?

1 Like

I apologise. It does work. I’d commented it out because of the bug with the “More” link.

That bug is that the link is displayed even when there are no “More” menu options. With the number of options on my forum, with the Badges option present, even though I don’t want it there, at least “More” has something to do! (The problem remains… when you’re on the Badges page itself, the useless “More” link is there.) "More..." shows in sidebar when there is nothing more

For some reason the “paste url over text to create hyperlink” feature didn’t work when editing this post.

I see. Actually I think that is not a bug because the More menu options are in there but hidden so it is not empty. But If I understand correctly you hide everything inside More menu? If this is the case I think hide the whole More section would be better?

To hide the More menu dropdown from all pages:

// hide More menu from all pages
.sidebar-more-section-links-details {
  display: none;
}

If you want to hide it on specific page you can use the body class to target it.

You can find it here.

For example on badges page it will looks like this:

// hide More menu from specific page (badges)
body.badges-page {
  .sidebar-more-section-links-details {
    display: none;
  }
}

This will hide the More dropdown but show the Badges on the sidebar.

Screenshot 2022-11-21 at 9.41.02


But if you use the previous code to hide Badges then that won’t show up too.

// hide badges More menu item
.sidebar-section-link-wrapper {
  .sidebar-section-link.sidebar-section-link-badges {
    display: none;
  }
}

// hide More menu from specific page (badges)
body.badges-page {
  .sidebar-more-section-links-details {
    display: none;
  }
}

Screenshot 2022-11-21 at 9.46.53

1 Like

I see it as a bug because I don’t think a “More” option should ever appear unless there are more things and therefore clicking “More” has some effect. The bug report is here: "More..." shows in sidebar when there is nothing more