Profile dropdown on image hover

How To
1

Hi there,
I have a site where people can make accounts. I also have a profile picture in my header, however, I want a dropdown menu to appear when people hover their profile picture on pc.
How can I achieve this?
I’ve tried it with Bricksforge but it turns into a mess. Any simple solutions?

2

Bearing in mind I have terrible methods :rofl:

You could add a DropDown element to the menu. Make the background (via Styles) a dynamic image (e.g. user profile img). This puts an image behind the link text. Remove link text, set width/height (in styles) to force size. Then put whatever you want in the drop-down (e.g. user name).

3

Hey Roel,

there are many ways to tackle this. I created a screencast to show you one manual but still very basic way. Hope it helps.

This is the custom CSS I used. Feel free to adjust it to your needs:

root:not(:hover) .avatar__dropdown {
  opacity: 0;
  visibility: hidden;
}

Best,

André

1 Like
4

I’ll give this a try and let you know how it goes!

5

Worked like a charm, see here: