BuddyPress.org

You’ve more or less got the structure correct.

– I don’t believe “title” is a valid attribute for li and ul tags. If your goal is to display the word “Community”, you’ll have to put it outside the tag like so:

<li>Community...

– I assume that your purpose is to make the Community submenu (Activity, Members, etc) a dropdown menu that is invisible except when you hover over the header Community. That’s a CSS issue. I recommend you find a WordPress theme (or any website, really) that has such a feature, look at the source code and especially the CSS, and emulate the necessary rules. You could also check out a tutorial, like the “horizontal” menu bar described here: http://www.seoconsultants.com/css/menus/tutorial/.

Good luck!

I went a different route to do the same thing.

Installed a plugin called ‘Page Links To’

Then I just pointed the page links to section of the page editor to the /member/, /groups/, /forums/ urls. no coding, took a few min.. just be sure to setup the pages with proper parent/child and your good to go…

I dont know about 3 tiers.. Works with my cleanroar theme and BP with two tiers.. I guess its dependent on WP pages. if you can set a page as a child of a child (a step child lol) then prolly.. I have never needed to go that deep.

@Bpisimone If I’m understanding your question correctly, you should be able to make one big logical check:

<?php if (bp_is_page( BP_GROUPS_SLUG ) || bp_is_page( BP_MEMBERS_SLUG ) || bp_is_page( BP_ACTIVITY_SLUG ) || bp_is_group() || bp_is_member() ) : ?> class="selected" <?php endif; ?>

Missing a ) after BP_FORUMS_SLUG

I leveraged the existing drop down method in BuddyPress and created the following code. Three files in my child theme. Modify for your needs.

• header.php
• _inc/css/custom.css
• _inc/scripts/nav.js

header.php

<div id="wp-nav-bar">

<ul id="nav" class="main-nav">

<!-- Community Drop Down -->

<li <?php if (

bp_is_page( BP_ACTIVITY_SLUG ) ||

bp_is_page( BP_MEMBERS_SLUG ) || bp_is_member() ||

bp_is_page( BP_GROUPS_SLUG ) || bp_is_group() ||

bp_is_page( BP_FORUMS_SLUG ) ||

bp_is_page( BP_BLOGS_SLUG ) ) : ?> class="selected"<?php endif; ?>>

<a href="<?php echo site_url() ?>/<?php echo BP_ACTIVITY_SLUG ?>/" title="<?php _e( 'Community', 'buddypress' ) ?>"><?php _e( 'Community', 'buddypress' ) ?></a>

<ul>



<?php if ( 'activity' != bp_dtheme_page_on_front() && bp_is_active( 'activity' ) ) : ?>

<li<?php if ( bp_is_page( BP_ACTIVITY_SLUG ) ) : ?> class="selected"<?php endif; ?>>

<a href="<?php echo site_url() ?>/<?php echo BP_ACTIVITY_SLUG ?>/" title="<?php _e( 'Activity', 'buddypress' ) ?>"><?php _e( 'Activity', 'buddypress' ) ?></a>

</li>

<?php endif; ?>



<li<?php if ( bp_is_page( BP_MEMBERS_SLUG ) || bp_is_member() ) : ?> class="selected"<?php endif; ?>>

<a href="<?php echo site_url() ?>/<?php echo BP_MEMBERS_SLUG ?>/" title="<?php _e( 'Members', 'buddypress' ) ?>"><?php _e( 'Members', 'buddypress' ) ?></a>

</li>



<?php if ( bp_is_active( 'groups' ) ) : ?>

<li<?php if ( bp_is_page( BP_GROUPS_SLUG ) || bp_is_group() ) : ?> class="selected"<?php endif; ?>>

<a href="<?php echo site_url() ?>/<?php echo BP_GROUPS_SLUG ?>/" title="<?php _e( 'Groups', 'buddypress' ) ?>"><?php _e( 'Groups', 'buddypress' ) ?></a>

</li>



<?php if ( bp_is_active( 'forums' ) && bp_is_active( 'groups' ) && ( function_exists( 'bp_forums_is_installed_correctly' ) && !(int) get_site_option( 'bp-disable-forum-directory' ) ) && bp_forums_is_installed_correctly() ) : ?>

<li<?php if ( bp_is_page( BP_FORUMS_SLUG ) ) : ?> class="selected"<?php endif; ?>>

<a href="<?php echo site_url() ?>/<?php echo BP_FORUMS_SLUG ?>/" title="<?php _e( 'Forums', 'buddypress' ) ?>"><?php _e( 'Forums', 'buddypress' ) ?></a>

</li>

<?php endif; ?>

<?php endif; ?>



<?php if ( bp_is_active( 'blogs' ) && bp_core_is_multisite() ) : ?>

<li<?php if ( bp_is_page( BP_BLOGS_SLUG ) ) : ?> class="selected"<?php endif; ?>>

<a href="<?php echo site_url() ?>/<?php echo BP_BLOGS_SLUG ?>/" title="<?php _e( 'Blogs', 'buddypress' ) ?>"><?php _e( 'Blogs', 'buddypress' ) ?></a>

</li>

<?php endif; ?>



</ul>

</li>

<?php do_action( 'bp_nav_items' ); ?>

</ul>

</div>

custom.css

/* Subnav */

ul#nav li ul						{width: 30.7%;}

ul#nav li ul li						{float: none; width: 100%;}

ul#nav li ul li a					{background: none !important; padding: 5px 15px;}

#wp-nav-bar ul li ul				{position: absolute; left: -999em; z-index: 1;}

#wp-nav-bar ul li ul li a span		{display: none;}

#wp-nav-bar ul li:hover ul,

#wp-nav-bar ul li li:hover ul,

#wp-nav-bar ul li.sfhover ul,

#wp-nav-bar ul li ul li.sfhover ul	{left: auto;}

nav.js

startList = function() {

if (document.all&&document.getElementById) {

navRoot = document.getElementById("nav");

for (i=0; i<navRoot.childNodes.length; i++) {

node = navRoot.childNodes;

if (node.nodeName="LI") {

node.onmouseover=function() {

this.className+" sfhover";

}

node.onmouseout=function() {

this.className=this.className.replace(" sfhover", "");

}

}

}

}

}

window.onload=startList;



j(document).ready( function() {

/* Admin Bar Javascript */

j("#wp-nav-bar ul.main-nav li").mouseover( function() {

j(this).addClass('sfhover');

});



j("#wp-nav-bar ul.main-nav li").mouseout( function() {

j(this).removeClass('sfhover');

});

});

I have exactly the same requirement. I don’t see how the ‘Page Links To’ plugin would work for this problem.

Hi Guys.

I have coped daves example above and tried it on my site however it doesnt seem to work correctly. Must be something I have done but I cannot see what it is. Been through line by line. Tearing my hair out here.

http://site.chestermc.org

I replaced ‘Community’ with ‘Home’

I just cant see what it is. Could any of you just have a quick glimpse to give me some pointers. Thanks to David for the solution!

Many Thanks.

PS – Im using BP default theme.

@mcrustk2

Did you put those files in your own childtheme? Did you remember the underscore in foldername _inc? You need to create that folder, and inside it a folder named scripts, if you do not have them already.

I think I noticed that changing the width of ul#nav li ul from preset 30,7% to a number below 12% would cause the buttons to spread out horisontally instead of vertical…

Also, if you have subpages to pages you have created yourself, and those subpages do not show, you need to change depth in header.php

Preset in default header.php is depth=1, which means that only parent pages are shown. You need to set it to at least 2 to include childpages, or 3 if your child page also have child pages.

Look for something like this string:

< ?php wp_list_pages( ‘title_li=&depth=2&exclude=’ . bp_dtheme_page_on_front() ); ? >

@raynerlim36 – Thanks for the info (linking custom to default.css) this was what I was missing!

@Karin – Hey! thanks for the tip, I needed this in the end.

I have got the menu working although my CSS seems a bit screwed up

http://site.chestermc.org

Many Thanks All!