The discussion revolves around reordering or hiding the “Votes” and “My Votes” top menu list items when the Voting plugin is enabled. mattdm wants to place “Top-Voted” and “My Votes” between “Active” and “Bookmarks,” but is unable to add them to the “top menu” setting due to an error message.
mattdm clarifies that he knows how to reorder top menu items in general, but the issue is specific to the Voting plugin. IAmGav suggests removing and re-adding items to reorder them, but this doesn’t work for the Voting plugin items.
dax provides a temporary solution by reordering the navbar items using a theme component. dax also suggests using CSS to reorder the items, providing an example code snippet.
mattdm asks about the “nth-child” value in the CSS and whether it depends on the order in the “top-menu” setting. dax confirms that the value does depend on the order and provides instructions on how to update the CSS if items are removed or hidden. Additionally, dax explains how to hide “My Votes” by adding display: none; to the CSS.
you remove all of them from the box, and add them in the order you want it.
Ah, I see from the title someone made when splitting this into a new thread that my question isn’t clear.
I know how to reorder top menu items in general. And I get that there’s a trick to it (“remove and re-add”) which isn’t obvious. But I know that trick. That’s not my problem.
My problem is: when the Voting plugin is enabled, new items, “Votes” and “My Votes”, appear in the menu list. If I try to add those to the “top menu” setting (as in the picture above), I find I can’t. The error message “You specified the invalid choice votes” appears.
Is there a different name I should use? Or is there a different way?
For what it’s worth, I think I want the order
Latest | Active | Top-Voted | Bookmarks
… I’m not convinced I want “My Votes” to show up at all (we’re using this in a “vote up everything you like!” fashion rather than “weight a handful of favorites” way).
I re-ordered your navbar items as described here
Feel free to change the order as you prefer. You will find a new theme component on your site based on the items that are visible now.
When there are unconventional buttons that do not appear in the “top menu” setting, just change the order with the CSS since the navbar element uses the flex property. See this example:
/*In this specific case the Voting plugin is enabled only in a category
so we will modify the navbar only in that category. Change {your-category-slug}
with the slug of the target category*/
.category-{your-category-slug} #navigation-bar {
/*Latest*/
:nth-child(1) {
order: 1;
}
/*Unread*/
:nth-child(2) {
order: 2;
}
/*New*/
:nth-child(3) {
order: 3;
}
/*Top Voted*/
:nth-child(4) {
order: 5;
}
/*My Votes*/
:nth-child(5) {
order: 6;
}
/*Active*/
:nth-child(6) {
order: 4;
}
/*Bookmark*/
:nth-child(7) {
order: 7;
}
}
Thanks @dax! Does the “nth-child” value in the CSS depend on the order in the top-menu setting, or are those values fixed somewhere? Like, if I remove “Active” (aka “Top”) from the list in the setting, will I need to update the CSS as well?
And, what if (as I was musing above), I want to hide “My Votes”?
Yes.
Just add display: none; to your CSS, e.g.:
/*My Votes*/
#navigation-bar :nth-child(5) { order: 6; display: none;}