Is it possible to overlay an avatar on a banner in a similar way? If yes, then at the same time you need to disable the ability to hide the banner
AI-generated summary
The discussion revolves around overlaying a user avatar on a banner in the FKB Pro theme. Arkshine provides CSS code to achieve this effect, which Gonerdot successfully implements. Arkshine suggests using a custom component to add the CSS. Gonerdot notes that the avatar disappears when the cover is hidden, prompting Arkshine to update the CSS to fix this. The solution works, and Gonerdot confirms the fix with a screenshot.
Can you try this CSS? To be inserted in your theme or a new component CSS.
.user-main:has(.has-background .user-profile-image) {
$avatar_size: 144px;
$avatar_margin: 20px;
$avatar_border_size: medium;
.user-profile-avatar {
position: absolute;
top: calc(-#{$avatar_size} / 2 - $avatar_margin);
left: $avatar_margin;
img.avatar {
background: var(--secondary);
border-width: $avatar_border_size;
}
}
.primary-textual {
margin-left: calc($avatar_size + $avatar_margin * 2);
}
}
What is your theme? It might need some adjustments.
