How to get a unique buddypanel menu on different pages? Let’s start with looking at the following css snippet
/* START of CUSTOM MENU PER PAGE */
/* First hide the menu items */
.blog-menu, .activity-menu {
display: none;
}
/* Turn on the activity menu items on the activity page */
.activity .activity-menu {
display: block;
}
/* Turn on the blog menu items on the blog page */
.blog .blog-menu {
display: block;
}
/* Turn on both the activity and blog menu items on a specific page */
.page-id-1234 .activity-menu, .page-id-1234 .blog-menu {
display: block;
}
/* END of CUSTOM MENU PER PAGE */You can do this with CSS. We are going to make one buddypanel menu with all the links you want, across all the pages. Let’suse the example of the Activity Feed vs Blog Page. Css works in a cascade. So it will always choose the most specific option. For example, if you have a paragraph you can say p {color: blue;} and the paragraph will be blue. But if the paragraph has a class of “cheesy” then p.cheesy {color: red;} it will turn red even if both pieces of code exist ( I am getting to the point! )
So we are going to give classes to each menu item. I have named them blog-menu and activity-menu. We will hide them in general, and then unhide them on the specific pages. Instructions follow in the comments below.
1. Go to Appearance – menu – buddypanel – and at the top of the page click Screen Options and turn on Css Classes
2. Make all your menu items for all pages.
3. For the blog page links, give them a class of blog-menu
and for the activity page links give them a class of activity-menu
For any menu items you want shown all the time, don’t give them a class at all.
4. Now in Additional CSS, add the above CSS code.
(Note: This article is cited from one of the posts in the official Buddyboss facebook group)