Thanks Armin,
Worked like a charm, would be very useful if there would a way in the future to control it via the Thumb\Element grid visual interface...
I've also implemented it for Element Grid:
.elements-collection-region .ph{
padding-bottom: 100%!important;
}
.elements-collection-region .element-wrap img,
.elements-collection-region .element-wrap video{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
So I think for this, you will have to unsync the text elements or you would have to write custom CSS.
.type-text > * {
text-align: left!important;
}
.type-text p[style],
.type-text h1[style],
.type-text h2[style],
.type-text h3[style],
.type-text h4[style],
.type-text h5[style]{
text-align: left!important;
}
Enter this css in "lay options" -> "custom css & html" -> "custom css for mobile"
Hey, can you enable your menu bar in customize - menu styles - menu bar?
Here set up your menu bar to look like you want it.
.navbar{
opacity: 0;
visibility: hidden;
}
.scrolled-down-one-window-height .navbar{
opacity: 1;
visibility: visible;
}
.scrolled-down-one-window-height .laynav a span{
color: red!important;
}
.scrolled-down-one-window-height .sitetitle-txt-inner{
color: red!important;
}
Enter this css in "lay options" -> "custom css & html" -> "custom css for desktop"
Enter this JS in html at bottom:
<script>
jQuery(window).on('scroll', function(){
if(window.scrollY > window.innerHeight){
jQuery('body').addClass('scrolled-down-one-window-height')
} else {
jQuery('body').removeClass('scrolled-down-one-window-height')
}
})
</script>
html.show-project-overlay . laynav{
display: none!important;
}
Enter this css in "lay options" -> "custom css & html" -> "custom css for desktop"
This should hide the menu when your project overlays open.
I love the project overlay feature, but I sometimes want to use it only for a certain category and let the other project behave normally. It could be nice to have control over that.
Yeah, this is a good idea, but I'm not sure if many people would use it.
Thanks, Armin, I appreciate the suggestion to use an SVG for the "Close" label. That could work as a temporary solution, but it does introduce some challenges with consistency – especially in terms of sizing and alignment with the main typography, across different devices and screen sizes.
A native text option would be much more flexible and scalable. Totally understand that this might not be a priority right now, but I’m glad you’ve noted it down. Looking forward to it if it ever makes it onto the roadmap!
Thanks again!
hey @arminunruh
thanks a lot for your reply. I thought there is a possibility to add project titles only for a specific "Project Thumbnail Grid", within this window and not all the of them at the same time:
[image: 1747228763125-screenshot-2025-05-14-at-15.17.25-resized.png]
You are right that putting the text to the left or right of the "Thumbnail Grid" might be tricky as they are close to each other. That's why I wanted to target only one "Thumbnail Grid" which has only 1 column.
For now I could definitely use the option you described. But it would be helpful in future to turn project titles separately for different "Project Thumbnail Grids". At least for me, I am trying to layout all my work through it, as then I can add a new project - assign the right category and it's up online without a need to add the project to the page.
Thanks a lot!
Thanks a lot, Armin!
It would be really nice to have these options in the future – especially being able to set the opacity for a background color.
Looking forward to it whenever you find the time!
Hey there, a carousel for a new thumbnail is now possible. Or a video or mouseover image. I'm not sure if I have enough time at the moment to add this.
can you try
window.laytheme.on('content_ready', typeOfContentThatIsReady, $target, isProjectOverlayObj){
}
typeOfContentThatIsReady
will be desktop or phone
$target will be any containers that include gridder grids
So all javascript changes / event listeners you could have made / bound to existing elements are gone.
If you bind event listeners in a delegated way to document like described here:
https://laytheme.com/documentation/custom-javascript.html#binding-click-events
<script>
jQuery(document).on("click", ".clickme", function(event) {
console.log("yay!");
});
</script>
then no dom changes will alter these binds
