Youzify - BuddyPress Add User Account to Main Navigation

yz-add-navigation-user-menu.php

<?php
/**
 * Add User Account to Main Navigation
 */
function yzc_add_navigation_user_account_menu( $items, $args ) {

    if ( $args->theme_location == 'primary' ) {
        $items .= '<li class="youzify-primary-nav-area2-li">' . do_shortcode( '[yzc_account_menu]' ) . '</li>';
    }

    return $items;
}

add_filter( 'wp_nav_menu_items','yzc_add_navigation_user_account_menu', 10, 2 );

/**
 * Create Menu Shortcode.
 */
function yzc_user_account_menu_shortcode() {

    if ( ! is_user_logged_in() ) {
        return;
    }

    ob_start();

    ?>

    <div class="youzify-primary-nav-area2">

        <?php youzify_user_quick_buttons(); ?>

        <div class="youzify-primary-nav-settings2">
            <div class="youzify-primary-nav-img" style="background-image: url(<?php echo bp_core_fetch_avatar( array(
            'item_id' => bp_loggedin_user_id(), 'type' => 'thumbnail', 'html' => false ) ); ?>)"></div>
            <i class="fas fa-angle-down youzify-settings-icon2" aria-hidden="true"></i>
        </div>

        <?php yzc_user_settings_menu( bp_loggedin_user_id() ); ?>

    </div>
    <?php

    // Get All This Function Content.
    $content = ob_get_contents();

    // Clean
    ob_end_clean();

    return $content;

}

add_shortcode( 'yzc_account_menu', 'yzc_user_account_menu_shortcode' );

/**
 * # User Settings Menu.
 */
function yzc_user_settings_menu( $user_id = null ) {

    // Get User ID.
    $user_id = ! empty( $user_id ) ? $user_id : bp_displayed_user_id();

    // New Array
    $links = array();

    // Profile Settings
    $links['profile'] = array(
        'icon'  => 'fas fa-user',
        'href'  => youzify_get_profile_settings_url( false, $user_id ),
        'title' => __( 'profile Settings', 'youzer' )
    );

    if ( bp_is_active( 'settings' ) ) {
        // Account Settings
        $links['account'] = array(
            'icon'  => 'fas fa-cogs',
            'href'  => bp_core_get_user_domain( $user_id ) . bp_get_settings_slug(),
            'title' => __( 'Account Settings', 'youzer' )
        );
    }

    // Widgets Settings
    $links['widgets'] = array(
        'icon'  => 'fas fa-sliders-h',
        'href'  => youzify_get_widgets_settings_url( false, $user_id ),
        'title' => __( 'Widgets Settings', 'youzer' )
    );

    // Change Photo Link
    $links['change-photo'] = array(
        'icon'  => 'fas fa-camera-retro',
        'href'  => youzify_get_profile_settings_url( 'change-avatar', $user_id ),
        'title' => __( 'change avatar', 'youzer' )
    );

    // Change Password Link
    $links['change-password'] = array(
        'icon'  => 'fas fa-lock',
        'href'  => bp_core_get_user_domain( $user_id ) . bp_get_settings_slug() . '/general',
        'title' => __( 'change password', 'youzer' )
    );

    // Logout Link
    $links['logout'] = array(
        'icon'  => 'fas fa-power-off',
        'href'  => wp_logout_url(),
        'title' => __( 'logout', 'youzer' )
    );

    // Filter.
    $links = apply_filters( 'youzify_get_profile_account_menu', $links, $user_id );

    ?>

    <div class="youzify-settings-menu2">
        <?php foreach ( $links as $link ) : ?>
            <a href="<?php echo esc_url( $link['href'] ); ?>">
                <div class="youzify-icon"><i class="<?php echo $link['icon'];?>"></i></div>
                <span class="yzb-button-title"><?php echo $link['title']; ?></span>
            </a>
        <?php endforeach; ?>
    </div>

    <?php
}

/**
 * Menu Styling.
 */
function yzc_custom_navigation_menu_styles() {

    if ( ! is_user_logged_in() ) {
        return false;
    }

    ?>
    <style type="text/css">
        .youzify-primary-nav-area2 {
            position: relative;
        }

        .youzify-primary-nav-area2 .youzify-quick-buttons,
        .youzify-primary-nav-area2 .youzify-primary-nav-settings2 {
            display: inline-block;
            vertical-align: middle;
        }

        .youzify-primary-nav-area2 .youzify-quick-buttons .youzify-button-item {
            width: 35px;
            height: 35px;
            line-height: 35px;
            margin-left: 8px;
            position: relative;
            display: inline-block;
            vertical-align: middle;
        }

        .youzify-primary-nav-area2 .youzify-quick-buttons .youzify-button-item .youzify-button-count {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .youzify-primary-nav-settings2 {
            height: 65px;
            z-index: 9999;
            cursor: pointer;
            margin-left: 8px;
            line-height: 65px;
            position: relative;
            display: inline-block;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            -webkit-tap-highlight-color: transparent;
        }

        .youzify-primary-nav-settings2 .youzify-primary-nav-img {
            width: 35px;
            height: 35px;
            vertical-align: middle;
            display: inline-block;
            background-size: cover;
            background-color: #f5f5f5;
            background-position: center;
            border-radius: 100%;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            -ms-border-radius: 100%;
            -o-border-radius: 100%;
        }

        .youzify-primary-nav-settings2 .youzify-settings-icon2 {
            top: 2px;
            color: #9ca4ab;
            cursor: pointer;
            margin-left: 5px;
            position: relative;
            text-align: center;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        .open-settings-menu .youzify-settings-icon2 {
            -webkit-transform: rotate(-180deg);
            -moz-transform: rotate(-180deg);
            -ms-transform: rotate(-180deg);
            -o-transform: rotate(-180deg);
            transform: rotate(-180deg);
        }

        .youzify-primary-nav-area2 .youzify-settings-menu2 {
            right: 0;
            margin: 0;
            width: 200px;
            display: none;
            z-index: 9999;
            text-align: left;
            line-height: 24px;
            padding: 8px 25px;
            position: absolute;
            background-color: #fff;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -moz-box-shadow: 0px 2px 1px 0px rgba(164, 166, 167, 0.33);
            -webkit-box-shadow: 0px 2px 1px 0px rgba(164, 166, 167, 0.33);
            box-shadow: 0px 2px 1px 0px rgba(164, 166, 167, 0.33);
        }

        .youzify-primary-nav-area2 .youzify-settings-menu2 a {
            margin: 0;
            width: 100%;
            padding: 8px 0;
            display: block;
            -webkit-tap-highlight-color: transparent;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
        }

        .youzify-primary-nav-area2 .youzify-settings-menu2 a span,
        .youzify-primary-nav-area2 .youzify-settings-menu2 a i {
            display: inline-block;
        }
        .youzify-primary-nav-area2 .youzify-settings-menu2 a .youzify-icon {
            width: 25px;
            margin-right: 5px;
            display: inline-block;
            text-align: center;
        }

        .youzify-primary-nav-area2 .youzify-settings-menu2 a i {
            top: 1px;
            color: #a4a6a7;
            position: relative;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        .youzify-primary-nav-area2 .youzify-settings-menu2 a span {
            color: #898989;
            font-weight: 600;
            font-size: 12.5px;
            text-transform: capitalize;
        }

        .youzify-primary-nav-area2 .youzify-settings-menu2 a:hover i {
            color: #777;
        }
    </style>
    <?php
}

add_action( 'wp_head', 'yzc_custom_navigation_menu_styles' );

/**
 * JS
 */
function yzc_add_navigation_menu_js() { ?>
    <script type="text/javascript">

        // Show/Hide Message
        jQuery( '.youzify-primary-nav-settings2' ).click( function( e ) {
            e.preventDefault();

            // Get Parent Box.
            var settings_box = jQuery( this ).closest( '.youzify-primary-nav-area2' );
            // Toggle Menu.
            settings_box.toggleClass( 'open-settings-menu' );
            // Display or Hide Box.
            settings_box.find( '.youzify-settings-menu2' ).fadeToggle( 400 );
        });
    </script>

    <?php

}

add_action( 'wp_footer' , 'yzc_add_navigation_menu_js', 999 );

Work fine. Thank you very much.

You are so welcome ^^

Just found some bug. When i click the drop down menu, it automatically hide it self. The page is vini100.com. But you must be log in to see it. It has facebook and google log in if this will help you

Where should I put this code?

It is working fine on all the pages except for the member directory & group directory!
Can you fix this, rest all the pages shows good, here is the link to screen: https://imgur.com/a/We7qN6h

A follow up on @DIGITAbADboyZ : It is working fine on all the pages except for the member directory & group directory!
Can you fix this, rest all the pages shows good, here is the link to screen: https://imgur.com/a/We7qN6h

I have the same issue. how to fix this??