Removing Subnav Item List

[Anonymous]

On two of my bp profile menu tabs (badgeos achievemet and point history) I would like to remove the subnav item lists. In the image you will not see the subnav because I’ve created a function to remove the individual menu items, but the overall content container is still there making it look like there is a large margin between content and profile menu. Using the folling in my custom.css removes that, but it removes the subnav for every profile tab, which I do not want. How can I make this specific to a profile tab (in this case badgeos achievements).

#subnav.item-list-tabs.no-ajax {
display: none;
}

[Alyssa]

@ryanmaler each item will have it’s own id here is the example to hide the news feed tab:

#subnav.item-list-tabs.no-ajax #news-feed-personal-li {
display: none;
}

Now you just need to find the id of the badgeos tab.

[Anonymous]

@tjchester the problem with both of the solutions below, one of which I tried and the other suggested by you, is they only remove the list item within the <ul> and the <ul> is what is creating that spacing. When I use inspect element within safari and set the ul to display: none the gape disappears. However, there is no class or id attributed to the ul so it removes the ul for every menu tab. Can you think of another solution where I can specify the ul on that specific menu tab?

#subnav.item-list-tabs.no-ajax #challenges-personal-li {
  display: none;
}

function badgeos_subnav-removal(){
global $bp;

$bp->bp_options_nav['achievements']['challenges']['name'] = '';
  
}

add_action('bp_setup_nav', 'badgeos_subnav-removal', 201);

[Alyssa]

@ryanmaler you need to use developer tools and inspect the element of the tab as described in my last post. The example was to hide the New Feed Tab, now you need to use the same code to hide just the BadgeOS tab.

[Anonymous]

Hey @tjchester. I just wanted to layout what my goal again because we may or may not be on the same page. We are close though. I’ve uploaded three pictures and in all of them I am on the Achievements menu item of the profile nav. The select for the Achievements section is on the menu expand part so its not visible in the images, but that’s the part of the profile that I am in.

In the first picture I have no custom css on the sub-nav and you can see displayed the sub-nav li “Challenges”. The goal is to remove that and any additional padding or margin between the first badge achievement and the top.

In the second picture you can see I am able to remove “Challenges” by using a simple display: none on the porper selector. However, you can see there is still an awkward amount of space between the first badge and the top.

I uploaded a third picture of the inspect element tool and the code area I am working with. The problem is the div containing the sub-nav id and item-list-tabs class is not nested within the necessary divs above for me to use another selector to compound and help select strictly the sub-nav for the “Achievements” section of the profile.

What am I missing?

[Alyssa]

@ryanmaler Prepend any CSS with .achievements and it will only apply to those pages

[Anonymous]

@tjchester that worked perfectly. How did you know to use the achievements class like that? May save me a question in the future.

[Alyssa]

@ryanmaler check the classes in the body first and foremost. Many plugins will do this so you can apply setting to only pages that plugin uses. NOTE: Only good plugins will do this 🙂 At the least a plugin should put most of it’s content within a div that has a unique class.

[Anonymous]

Wicked cool. I didn’t realize that cluster of classes up there. This will likely come in handy in the future. Thanks @tjchester.

[Alyssa]

Glad to help 🙂