the address of our site is gct.wpengine.com. The issue

the address of our site is gct.wpengine.com. The issue is the top bar is getting scrunched down into some sort of more-items '+' menu by the theme, although only once a user has logged in.

see images...
http://take.ms/oGlcp
http://take.ms/71Nvs

if you watch the page closely, it seems to display properly, and then jquery script or something seems to then force it into the dropdown view.

seems to have do with some custom code we wrote to correct avatar setting from our social registration plugin (see below), but can't seem to figure out how to fix!

// Avatar retrieval correction for LoginRadius fetch
function kleo_menu_user_avatar( $item_output, $item, $depth, $args ) {

$output = '';

if ( is_user_logged_in() ) {

$url = bp_loggedin_user_domain();

$attr_title = strip_tags( $item->attr_title );

$output .= 'has_children && in_array($depth, array(0,1)) ? ' js-activated' : '' ) . '" href="' . $url . '" title="' . $attr_title .'">' . bp_get_loggedin_user_avatar(array('width' => 25, 'height' => 25)) . '';

//$output .= 'has_children && in_array($depth, array(0,1)) ? ' js-activated' : '' ) . '" href="' . $url . '" title="' . $attr_title .'">' . '<img src="' . bp_get_loggedin_user_avatar(array('width' => 25, 'height' => 25, 'html'=>false)) . '" />';

$output .= ( $args->has_children && in_array($depth, array(0,1))) ? ' <span class="caret"></span>' : '';

return $output;
} elseif ( $args->has_children && in_array( $depth, array( 0, 1 ) ) ) {
return $item_output;
} else {
return '';
}
}

  • Michael Bissett

    Hey @Benji, thanks for posting your question here! :slight_smile:

    As mentioned on the live chat session earlier today, this'll be something that'll require a deeper look, could you please send in the following via our secure contact form:

    - Mark to my attention, the subject line should contain only: ATTN: Michael Bissett
    - Do not include anything else in the subject line, doing so may delay our response due to how email filtering works.
    - Link back to this thread
    - Include WordPress admin access details (login address, username & password)
    - Include SFTP log-in details (hostname, username & password)
    - Please mention where I can find your code inside your site
    - Include any relevant URLs for your site

    On the contact form (linked to below), please select "I have a different question", this ensures it comes through and gets assigned to me.

    https://premium.wpmudev.org/contact/

    Thanks a bunch! :slight_smile:

    Kind Regards,
    Michael

  • Predrag Dubajic

    Hi Benji,

    To followup on your thread here:
    https://premium.wpmudev.org/forums/topic/weird-theme-styling-issue-with-top-bar-scrunching-down-menu-icons-1

    I checked your site and didn't see the issue you are referring to, see first screenshot attached below.

    There is only small CSS issue with icon going over top bar which you can resolve with this CSS code:

    .kleo-menu.kleo-user_avatar-nav img {
    	top: 0;
    }

    Did you remove the code mentioned and that's why I'm not seeing it?

    When I add your code to text editor something is not right there, as you can see from second screenshot attached.
    Try replacing it with this code to see if it will work:

    // Avatar retrieval correction for LoginRadius fetch
    function kleo_menu_user_avatar( $item_output, $item, $depth, $args ) {
    
    $output = '';
    
    if ( is_user_logged_in() ) {
    
    $url = bp_loggedin_user_domain();
    
    $attr_title = strip_tags( $item->attr_title );
    
    $output .= has_children() && in_array($depth, array(0,1)) ? ' js-activated' : '' ) . '&quot; href=&quot;' . $url . '&quot; title=&quot;' . $attr_title .'&quot;>' . bp_get_loggedin_user_avatar(array('width' => 25, 'height' => 25)) . '';
    
    //$output .= has_children() && in_array($depth, array(0,1)) ? ' js-activated' : '' ) . '&quot; href=&quot;' . $url . '&quot; title=&quot;' . $attr_title .'&quot;>' . '<img src=&quot;' . bp_get_loggedin_user_avatar(array('width' => 25, 'height' => 25, 'html'=>false)) . '&quot; />';
    
    $output .= ( $args->has_children && in_array($depth, array(0,1))) ? ' <span class=&quot;caret&quot;></span>' : '';
    
    return $output;
    } elseif ( $args->has_children && in_array( $depth, array( 0, 1 ) ) ) {
    return $item_output;
    } else {
    return '';
    }
    }

    Best regards,
    Predrag

  • Adam Czajczyk

    Hello Benji,

    I hope you're well today!

    I hope you don't mind me jumping into this conversation but I'd like to ask you to not post any sensitive data such as login credentials (e.g. user login and password) here. I've checked that fortunately LinkedIn is smart enough to detect that it's probably not you logging into the account but nevertheless please change your LinkedIn password immediately!

    This forum is a public forum and its content is very well indexed by Google, therefore we do not let our community members to post any passwords and other sensitive information here.

    In case you wish to provide us with such data, please use our contact form as described in this post:
    https://premium.wpmudev.org/forums/topic/the-address-of-our-site-is-gctwpenginecom-the-issue#post-905735

    As for the "linkedin avatar issue". Could you please grant me a support access to your dashboard so I could take a closer look?

    To do this, please follow this guide:
    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Cheers,
    Adam

  • Michael Bissett

    Hey @Benji! :slight_smile:

    This was a tricky one, but after making a minor tweak to your code, switching the function used for displaying the avatar:

    // Avatar retrieval correction for LoginRadius fetch
    function kleo_menu_user_avatar( $item_output, $item, $depth, $args ) {
    
        $output = '';
    
        if ( is_user_logged_in() ) {
    
            $url = bp_loggedin_user_domain();
    
            $attr_title = strip_tags( $item->attr_title );
    
    			$output .= '<a title="' . bp_get_loggedin_user_fullname() . '" class="kleo-bp-user-avatar' . ( $args->has_children && in_array($depth, array(0,1)) ? ' js-activated' : '' ) . '" href="' . $url . '" title="' . $attr_title .'">' . get_avatar( get_current_user_id(), 32 ) . '</a>';
    
    //$output .= '<a title="' . bp_get_loggedin_user_fullname() . '" class="kleo-bp-user-avatar kleo-rounded-noborder kleo-avatar-menu' . ( $args->has_children && in_array($depth, array(0,1)) ? ' js-activated' : '' ) . '" href="' . $url . '" title="' . $attr_title .'">' . '<img src="' . bp_get_loggedin_user_avatar(array('width' => 25, 'height' => 25, 'html'=>false)) . '" /></a>';
    
            $output .= ( $args->has_children && in_array($depth, array(0,1))) ? ' <span class="caret"></span></a>' : '</a>';
    
            return $output;
        } elseif ( $args->has_children && in_array( $depth, array( 0, 1 ) ) ) {
            return $item_output;
        } else {
            return '';
        }
    }

    I'm now seeing that the menu section for when a user is logged in via LinkedIn is no longer scrunched up as you were seeing it before. The issue we were running into before was due to a bit of styling code being returned in the image, which caused the image to be floated to the left, and a a margin applied.

    With using this other function, that's no longer the case. :slight_smile:

    I also took the liberty of adding in the CSS code that my colleague Predrag had mentioned into your theme's custom CSS area, to resolve the alignment issue that he had mentioned earlier:

    .kleo-menu.kleo-user_avatar-nav img {
      top: 0px;
    }

    Could you confirm that things are working as they should be please? :slight_smile:

    Kind Regards,
    Michael

  • Benji

    I am quite literally clapping out loud in my office right now. Thank you so much for this! Will continue testing to see if any further issues, although as far as I can tell, definitively solves the problem.

    To be honest, I was on the fence about this whole WPMU thing, but this I'd think is definitely keep me around for a bit longer. Looking forward to pushing forward on other issues :slight_smile:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.