How to Manipulate / Hide BuddyPress Nav Bar

Hi there,

Is there a way to configure-change-delete the BP nav bar in the BP Daily Theme? I have found mixed responses so I’m not clear on how to do this.

Thanks.

  • Jorgen Juel
    • Site Builder, Child of Zeus

    Hi @james

    I can’t seem to find any settings in the theme to fix this, so you have to do it yourself.

    What you need to do is change the style.css file. You can do so by going to themes > edit, and select “style.css” – found at the bottom-right area of the page (make sure the correct theme is selected at the top right select-box).

    In this file you want to go to the very bottom and paste the following code:

    /*
    
    * Custom Styles
    *
    */
    .page-navigation{
    display:none;
    }

    Or, if you wish to remove the top section, you change .page-navigation with .category-navigation.

    Also note, the fist part between /* and */ is simply commenting, making it easier for you to relocate this later on.

    I hope this helps.

    Jørgen Juel

  • Derek
    • Site Builder, Child of Zeus

    Hello James!

    I´m a WPMUDEV user like you, but let me ask you a thing. Does your admin bar is like the WordPress’s admin bar or is different?

    If it is different you can change it to the normal wp admin bar and use some plugins to edit it like this two from WPMUDEV:

    https://premium.wpmudev.org/project/ultimate-branding/

    https://premium.wpmudev.org/project/custom-admin-bar/

    Or this from WordPress Plugin repository:

    For Hide admin bar from the front-end only:

    http://wordpress.org/extend/plugins/hide-admin-bar-2013/

    For change the admin bar color to blue (If you have some CSS skills, you can change colors and etc):

    http://wordpress.org/extend/plugins/blue-admin-bar/

    For change the entire administration and adminbar interface:

    http://wordpress.org/extend/plugins/mp6/

    If you want to know how you can change the admin bar from Buddybar to WP admin bar you can just insert this code on your wp-config.php file:

    define(‘BP_USE_WP_ADMIN_BAR’, true);

    So the buddybar will change to wp admin bar and you can edit it with the plugins.

    Again: I´m not a WPMUDEV specialist, but I did this things a lot of times.

    Hope it helps.

    Good Luck

    Derek

  • Patrick
    • Support Monkey

    Hiya @james

    Well now, you’ve got some excellent suggestions on customizing things from 2 stellar members here!

    The only thing I have to add is if you choose to add custom CSS styling to your theme, it’s highly recommended to use a child-theme so your edits do not get overwritten when you update the theme.

    For more on child-themes, see

    https://premium.wpmudev.org/manuals/the-buddypress-manual-2/what-are-parent-and-child-themes/

    …and

    http://codex.wordpress.org/Child_Themes

  • James
    • Flash Drive

    Hi guys, thanks so much for the great advice! I went ahead and tried the first option, and it worked great hiding the BP nav bar but it also made the built in Primary navigation bar disappear leaving only the categories. How might I add this back? :slight_smile:

  • Patrick
    • Support Monkey

    Hiya @james

    Just checked on one of my dev sites and see that both of those menus use the same CSS class for the parent container div. So you can correct the display by getting more specific with the one you want to display.

    Change the CSS from this:

    .page-navigation{
    display:none;
    }

    … to this:

    page-navigation {
    display:none;
    }
    .page-navigation ul#menu-main {
    display:block;
    }

    Thanks for bringing this up. I’ll flag the theme developer on this so perhaps in a future version, distinct classes can be added to these 2 divs.

  • James
    • Flash Drive

    @patrick

    Thank you very much, glad you could find that coding issue. Perhaps I am missing something but when I use that code displayed above, I end up still getting all 3 navigations. The built in categories, the built in header menu and the buddypress menu. Isn’t there a way to just say something like:

    .bp-navigation{

    display:none;

    }

  • Patrick
    • Support Monkey

    Hi again @james

    Oh dear, you're absolutely right. And it was my silly copy/paste error that threw you off. There's a missing dot denoting the CSS class on the very first line.

    Even so, I've tried every possible combination of CSS selectors and specificity that I can think of, and cannot hide one that one nav element the way the theme is coded now.

    The only way to do it at present is to upload and enable the child-theme included in the bp-daily folder.

    Then you can edit the header.php file of your child-theme to give those html elements a custom class and use that to hide them or comment out the bp nav.

    As that may sound like a daunting task, I wanted to create a child-theme for you that you could simply upload and activate. But I discovered another problem in doing so: the child.css file appears to not load properly and custom styles are not applied.

    I'll notify the theme developer of that issue right away.

    The alternative for the moment is to use the child-theme I made for you anyway but, rather than adding custom CSS to the child-css file (which isn't loading for some reason), install the Jetpack plugin and enable the Custom CSS module.

    You will then be able to add the required CSS to the "Edit CSS" area that will be available under the "Appearance" menu in your admin (you can see it in the screenshot below):

    http://wordpress.org/plugins/jetpack/

    In the child-them I've included here (zip file), I've added a class of navwp to the WordPress menu, and a class of navbp to the BuddyPress menu.

    Once you have uploaded and activated the child-theme, and have installed and activated Jetpack, add the following under "Edit CSS":

    #site-wrapper .navbp {
    display:none;
    }

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.