Style buddypress widget

I want to have avatar and links appear in the same line on smaller devices (in trigered menu). How can I do this. My site: m52study.tk . Use username "Test Smith" password: "IAMEXAMPLE"

  • Adam Czajczyk
    • Support Gorilla

    Hello Mwale,

    I hope you're well today and thank your question!

    We spoke about it during live chat, so thank you for starting a thread.

    I accessed the site and took a look around but I'm not sure if I get you right. You mentioned the "triggered menu" so would that be the one (see below)?

    I can see an avatar there and some menu options but I must admit I find it slightly difficult to imagine what do you mean buy "in line" in this case. Could you elaborate a bit more on this?

    If it's not that menu/location please correct me and supply me with a screenshot showing the issue. I'll then examine page source and I believe I'll be able to provide you with useful CSS.

    Best regards,
    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hello Mwale!

    Thanks for the screenshot, that helped a lot :slight_smile:

    According to the test in browser CSS editor these rules should help:

    @media screen and (max-width:760px) {
    .sidr-class-bp-login-widget-user-avatar {float:left;}
    .sidr-class-bp-login-widget-user-logout {clear:both;}
    }

    Give it a try please and let me know if it worked for you.

    Best regards,
    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hello Mwale!

    Thank you for your kind words, though I don't think I'll get any official "badge" for that :smiley:

    As for the link. I may have misunderstood you because I made it this way actually on purpose. If you wish to put the "Logout" link next to avatar (right below the "Smith Test" - user name) simply remove remove this line from the code I gave you recently:

    .sidr-class-bp-login-widget-user-logout {clear:both;}

    Let me know please if that is what you need :slight_smile:

    Best regards,
    Adam

  • Mwale
    • The Crimson Coder

    Excellent Adam Czajczyk worked like a charm! I would however like to move the link a little bit higher. Can I use
    .sidr-class-bp-login-widget-user-logout {padding-top: -2px}
    , will this be responsive (look good on all devices)? Also I would like a dividing line under, like the other menu items. Hope this isn't too much..
    Thanks,
    Mwale

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.