The effects of alcohol on sustanon 250 leucine for – real weight loss & bodybuilding benefits?
Avatars floating OV...
 
Share:
Notifications
Clear all

Avatars floating OVER sticky headers with Elementor during scroll

5 Posts
2 Users
0 Reactions
1,749 Views
Posts: 3
Topic starter
(@caver01)
Active Member
Joined: 4 years ago

Using Elementor page builder configured with a sticky header that that stays at the top of viewport (has search, nav menu). As I scroll a post with comments, the avatar circles float over the header as they scroll past instead of under with the rest of the post content. I am using layout #3 if that matters. The avatar circles—even default images—do not respect the z-index of the sticky header which in my case is set to 2000. I tried to style the circle elements but could not figure out the CSS needed so I had to set display: none. This is not really a good workaround since now I have no avatars at all, but at least the visual is not messed up. The rest of the comment layout works as expected. Only the avatars float over the sticky header. Ideas?

 

4 Replies
Asti
Posts: 7645
 Asti
Support
(@asti)
Illustrious Member
Joined: 7 years ago

Hi @caver01,

Could you please provide us some example URL? 

Reply
2 Replies
(@caver01)
Joined: 4 years ago

Active Member
Posts: 3

@asti

I was able to implement a workaround by adding CSS to Styles and Colors settings area of wpDiscuz:

 

.comments-area{opacity:.99;}

By setting opacity to less than 1 I created a new stacking context for the comments area. This keeps everything under my sticky header. Not ideal, but it works.

Reply
Asti
 Asti
Support
(@asti)
Joined: 7 years ago

Illustrious Member
Posts: 7645

thank you for sharing the information. 

Reply
Posts: 3
Topic starter
(@caver01)
Active Member
Joined: 4 years ago

Yes. This is a production site, but I temporarily took out my display: none so the avatars are visible again. Try this:

https://summitsips.com/2011/08/drink-of-the-week-cuba-libre/

 

I should add that I don't see it on Chrome and Firefox, but Safari on a Mac, and mobile S

afari on iPad Pro, iPhone all reveal the problem.

I need to fix it later, so hopefully a short window will allow you to see. Also, here is a screenshot attached.

Screenshot
Reply
Share: