Hi @backpackersunion
Which tabs are you looking to consolidate?
@backpackersunion
No, the Devs has not made this yet it seems. I am not sure if this and/or bp menu toggle for responsive views is going to be incorporated in the next version of BP or not. Though it is high time ( or may have passed the high time) for this.
If you are interested or can convince the Devs or can submit patch you may find this thread useful – https://buddypress.trac.wordpress.org/ticket/6291#comment:7
Thanks.
Hi @henrywright
Thanks for reaching out.
My current menu structure is:
Activity | Profile | Sites | Notifications | Messages | Friends | Location | Gallery | Settings
I’m looking to combined: “Sites”, “Notifications” and “Settings” into an item called ‘More’ or something to that effect.
Any ideas?
Hi @rosyteddy
Thanks for the information. That ticket seems more related to the total space available for BP Pages on default themes and not specific page items.
Unfortunately, there’s no existing easy way to consolidate or merge tabs. The easiest way to achieve that in my opinion would be to create a new tab called More and remove each of the unwanted tabs. More would need some custom code to (re)introduce all of the functionality that has been lost via your unwanted tab removal.
Sounds a big project I know, but I can’t think of anything easier 🙁
I was afraid it might be a deceivingly involved project, but I like your reasoning.
What are your thoughts on a strategy like this:
1. Use a function to move lower-priority Tabs to the end of the list (to the right).
2. Use CSS to reposition those Menu items vertically and hide.
3. Use a function to add another menu “More” before the lower-priority menu items.
4. The Tricky part.
Option 1. Attempted to use CSS hover to display the hidden list items following the ‘More’ Tab (I have an idea of how it might work but need to test it)
Option 2. I think ‘option 1’ wouldn’t work for touch screens because there isn’t really a hover effect, as it behaves more like an ‘Active’. So Js would be needed to initiate a drop down box with the hidden menu items. However, this is above my skill set.
Do you think this strategy would make it any easier or more feasible?
**(I had links to existing functions for step 1 and 3 but they may have caused my post submit to fail)
(I had links to existing functions for step 1 and 3 but they may have caused my post submit to fail)
Ah, sorry about that. Posts with > 2 links go into the moderation queue.
Do you think this strategy would make it any easier or more feasible?
I think your approach sounds totally feasible.
My only question would be why do things on hover? Your concern that implementing a hover effect might cause issues for mobile users could be addressed just by using simple click approach (or in the case of mobile users, that would be tap). So for example, click on ‘more’ to reveal the hidden tabs.
The Submission Fail: No worries, I probably should have read more into why. But I do agree with you about a pop up message. Would definitely be helpful.
Why Hover?: Only because that’s the only way I know how to manipulate the CSS to display the hidden items with a user action. Would the click or tap require a function or could it be done within the CSS file?
I was thinking along the lines of adding some jQuery. If you google the .hide() and .show() methods there should be a lot that comes up. A very quick (meaningless) example:
$( '#hide' ).click( function() {
$( '.tab' ).hide();
});
$( '#show' ).click( function() {
$( '.tab' ).show();
});
There’s also .toggle() which might be more suited to this.
Awesome, thank you. I’ll have to do my homework and learn more about using jQuery and try implementing it along side the other steps.
I really appreciate the guidance and taking the time to help! It sound like show/hide or toggle might be the final piece to make this work. I’ll tackle it in a few days and report back here on my success or failures for anyone else trying to accomplish something similar.
Cool! Good luck with the project 🙂
Just to add, if you’re looking to get started with things like this, the Mozilla Developer Network is a useful (and free) resource that I’ve used many times in the past.
@backpackersunion
You could perhaps have a look at replacing the current default nav for this BP WP style nav, haven’t looked at this for a while but should still function:
Members Navigation Menus
Hi @hnla
Thanks for sharing. I had to read it a few times to wrap my head around it, but it looks worth trying. Does it essentially replace the standard BP Profile menu with the WordPress menu system (i.e. Dashboard -> Appearance -> Menus)?
It looks like there are two possible places to modify the markup:
1. bp-themes/bp-default/members/single/home.php
2. bp-templates/bp-legacy/buddypress/members/single/home.php
I’m assuming the first is the correct home.php file for BP 2.1.1?
bp-themes isn’t any longer a part of the BP core package, try and reference everything from bp-legacy which are actually the theme compatibility templates used by BP.
The function works in a similar fashion to the WP menu in terms of how the items are built, fundamental difference from the existing approach is that the sub-menus are actually proper ul ul child elements nested.
@hnla that’s very useful! I wasn’t aware that was possible 🙂
