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