-
Posts
-
Hi Enfold team,
I’m using the Enfold Gallery element in WordPress (Avia Layout Builder). I’m trying to achieve a CSS-only UX like this:
The large preview image stays at the top and is sticky while the user scrolls down through the thumbnails below it.
Once the thumbnails end, the page continues scrolling normally to the next section.
I’m not using any JS. I added a custom class to the Gallery element and tried multiple CSS approaches. I can sometimes get sticky to work, but then the layout breaks (preview shifts left / preview becomes tiny / thumbnails become huge or microscopic / only a few thumbs show per row). When I fix thumbnail sizing, the sticky behavior stops working.
What I’m using
Enfold theme (latest) + WordPress
Gallery element style: big preview + thumbnails (the normal preview-on-top layout)
I added a custom class on the Gallery element: av-gallery-sticky-scroll
What I want (exact behavior)
Keep Enfold’s default layout: big image on top, thumbnails below
Make only the big preview sticky (position: sticky; top: …)
Thumbnails should remain a normal-sized grid below
No inner scrolling container — I want normal page scroll, with preview sticking until the thumbnail list ends
CSS attempts (examples)
I tried sticky on .avia-gallery-big and also .avia-gallery-big-inner (in case the inner wrapper is needed), plus forcing overflow: visible on likely parents. I also tried overriding thumbnail widths using flex/grid.
Example of my latest attempt:
@media (min-width: 990px){
.av-gallery-sticky-scroll{
–stickyTop: 120px;
–thumbSize: 140px;
}.av-gallery-sticky-scroll .avia-gallery-big,
.av-gallery-sticky-scroll .avia-gallery-big .avia-gallery-big-inner{
position: sticky;
top: var(–stickyTop);
z-index: 50;
}.av-gallery-sticky-scroll,
.av-gallery-sticky-scroll .avia-gallery,
.av-gallery-sticky-scroll .avia-gallery-big{
overflow: visible !important;
}.av-gallery-sticky-scroll .avia-gallery-thumb{
display: grid !important;
grid-template-columns: repeat(auto-fill, var(–thumbSize));
gap: 12px;
margin-top: 14px;
justify-content: start;
}.av-gallery-sticky-scroll .avia-gallery-thumb li{
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}.av-gallery-sticky-scroll .avia-gallery-thumb img{
width: 100% !important;
height: auto !important;
display: block;
}
}Result: thumbnail sizing becomes unpredictable (either microscopic or huge), and sticky often stops working.
My questions
Is it possible CSS-only to make the Gallery element’s big preview sticky (preview on top, thumbs below) without breaking Enfold’s internal thumb sizing/layout rules?
Is there a recommended selector/wrapper inside the Gallery element that is safe to apply position: sticky to?
If sticky fails because of an Enfold container overflow rule, which wrapper should I override (and is there an Enfold setting that influences this)?
If this isn’t feasible with the Gallery element, is there a recommended Enfold-native alternative (e.g., specific element/layout pattern) that support suggests?
Thanks,
Robsee example page – with css code on:
https://webers-testseite.de/ajax-gallery/in my case it is at 768px switching
I even made sure that the heights of the large images adjust when hovering over them, which is not the case in Enfold’s standard behaviour.Wow Guenni, that is a lovely piece of code!! Thank you!! Enfold should consider adding this to core functionality as it is a huge upgrade to the Gallery element.
One question – how do I adjust the preview photo size and/or how much room the thumbnails have at the bottom of the sticky container?
Gallery with your css is now live on this page, towards the bottom:
https://www.thomashenthorne.com/26-mooring-road-san-rafael-ca/
Thank you!
RobSorry Guenni, WP Engine seems to insist on geoblocking my website even though i have told them to disable it. Can you try again? You can also see the behavior on your preview page. The thumbnails are right against the bottom of the container / page. it would be great if the container had some padding around it just under the thumbnails.
Thank you!
RobYour page is still the block – but
Can you take a screenshot of my page and then draw on the image to show which spacing needs to be changed?
Based on your description, I don’t understand what you want to change.If yo ucan give the ray ID from the cloudflare error (at bottom) we can fix.
Re the image, here you go… basically the thumbnails are against the bottom of the screen and dont start to display nicely until user hovers. We are 99% there, just need some padding between bottom of thumbnails and bottom of page.
Cloudflare Ray ID: 9cac7fcdcced65d6
change the animation at advanced tab:
It’s exactly the problem you can see on my page now, where I’ve widened the gallery. At some point, the sticky large image is so big that you can’t see much of the thumbnails scrolling underneath it.
Therefore, it’s really only suitable if the column with the gallery is narrower.I’ll try that – in the meantime WP Engine just unblocked Germany (and the rest of Europe, so the mods here should be happy…)
Yes—now your page is opening. Now please explain to me how this is supposed to work with such large images above the thumbnails—it’s obvious that these images will cover the thumbnails below.
How about if the thumbnails scroll up to the side of the large sticky image?test :
/* 1. GLOBAL STICKY PERMISSION */ html.html_stretched, html.html_stretched body#top, #top #wrap_all, #top #main { overflow: visible !important; } @media only screen and (min-width: 768px) { /* 2. MAIN CONTAINER We use CSS Grid for the 65% / 1fr split */ #top .avia-gallery.av-gallery-sticky-scroll { display: grid !important; grid-template-columns: 65% 1fr !important; gap: 30px !important; align-items: start !important; /* Crucial: prevents big-wrapper from stretching to full height */ overflow: visible !important; position: relative !important; width: 100% !important; } /* 3. STICKY WRAPPER (Left Column) */ #top .avia-gallery.av-gallery-sticky-scroll .avia-gallery-big-wrapper { grid-column: 1 !important; position: -webkit-sticky !important; position: sticky !important; top: 100px !important; /* Adjust based on your header height */ z-index: 100 !important; height: auto !important; margin: 0 !important; background: #ffffff !important; } /* 4. IMAGE ELEMENT */ #top .avia-gallery.av-gallery-sticky-scroll .avia-gallery-big { position: relative !important; display: block !important; height: auto !important; } #top .avia-gallery.av-gallery-sticky-scroll .avia-gallery-big img { display: block !important; width: 100% !important; height: auto !important; max-height: 80vh; object-fit: contain; } /* 5. THUMBNAILS (Right Column) */ #top .avia-gallery.av-gallery-sticky-scroll .avia-gallery-thumb { position: relative !important; z-index: 10 !important; padding: 0 !important; width: 100% !important; min-height: 100vh; /*** we need the gallery thumbs container bigger than the big image *** / } }the min-height option is necessary only because my thumbs container is less high than the big image – guess your
And change the 65% to your needs in : grid-template-columns: 65% 1fr !important;
This one is worse, unfortunately.
The entire screen inlcluding the sticky menu at top is now in a 3/5 container it appears.It was in 1/1 temporarily earlier today as I tried to get the code to work but it has always been in 1/5, 3/5, 1/5 mode.
thanks for trying, I will see if the mods have any ideas.
Hi,
Thank you for the update.
We tried visiting the site, but it is still locked by Cloudflare. We’ve tagged @Mike on the thread so he can look into this further.
Best regards,
IsmaelHi,
On your page https://www.thomashenthorne.com/26-mooring-road-san-rafael-ca/#av_section_42
I see your gallery but I don’t see the larger image that ment to change when hover over the gallery items, such as in Guenni007’s example. https://webers-testseite.de/ajax-gallery/#av_section_4 I assume that you like the second solution “Ajax Gallery – Thumbs at the right side”, because in the first solution the main image is hiding the gallery and most and not be clicked.
I also don’t find the classes on the page for Guenni007’scss to work, are you still tring to achive this layout?
Best regards,
MikeHi Mike! Yes, that is the layout I was going for, but as you saw we ran into some problems, and then also I found out that lazy load has not yet been added to the performance settings of gallery element, and since we are having some bandwidth issues, I returned to Masonry block. I actually would prefer the “hero” photo of Gallery on top with thumbnails below, and the hero to be sticky as user scrolls through thumbnails because sometimes there can be 60-90 photos in one gallery. I would also need to figure out how to lazy load it…
Thanks!
RobHi,
Thanks for your patience, please include an admin login so we can create a test page.Best regards,
Mikethe classes (yes two classes here – only because i like to show both on the same page) are
av-gallery-sticky-scroll and besides
Thats all.PS : on that code – you see that i manage the amount of thumb columns by pure css. Because i like to rule it differently on small screens and orientation – as you can see at the bottom of the snippet.:
@media only screen and (min-width: 768px) and (orientation: portrait) { #top .avia-gallery.av-gallery-sticky-scroll.besides .avia-gallery-thumb { grid-template-columns: repeat(2, 1fr); } }on mobile devices with small screens – ( iPhone etc. ) this behaviour makes no sense – not only because of missing hover style …
- You must be logged in to reply to this topic.