Lay Theme Forum

@Richard-K Thank you Richard! I'll look into this.

Hello there,

I would love to create a carousel slider with the plugin that scrolls vertically instead of horizontally, so that I can have a "static" image on one side and a bunch of images to scroll through on the other.

Much like here: https://bureau-progressiv.com/work/in-flux-american-jewelry-an-the-counterculture/

I've entertained the thought to split the screen, but I would need this specific layout only for certain projects, hence I believe it would be great if I could just switch the carousel to a vertical scroll.

I am grateful for any help in that direction. Thanks!

Thank you @Richard-Keith, I'll give these a read - even though I already delved into some of them!

xx

Hello everyone,

I am currently playing around with CSS mix-blend-mode for future use, however it's not working when applied to text containers - while it works with the site title and menu as demonstrated here: https://brutalo.biz/

This is the CSS code I am using:

.static {
	mix-blend-mode: difference !important;
	position: fixed !important;
  top: 35% !important;
  left: 20% !important;
  transform: translate(-25%, -25%)!important;
}

.blend {
	mix-blend-mode: difference !important;
}

The custom classes are then applied to the text containers, but nothing happens, neither on the video nor the blue background. I tried applying #fff in the text formats, the font editor etc. but also, nothing changes. I wonder if I'm just targeting the wrong divs / classes ?

As always, thank you for any input. xx

@Richard-Keith Hey Richard, I wonder if you have seen this... but can you point me into the right direction regarding the alignment of the Caption text within the container?

I'm trying to make it vertically centered as opposed to the top, which is now the case, but I still want the container to fit height and width to the parent (except the 20 px margin).

Thank you!

Hello Richard,

sorry, weird mistake. It just copied the anchor. This is the website:
https://stilpunkt.mcelangelo.com/

I managed to get the caption into the image and style it via this code:

.img {
	display:flex;
	z-index:0;
}

.caption {
	padding: 40px;
	background: rgba(255, 255, 255, .8);
	opacity: 0;
	transition: all 1s ease;
	z-index: 10;
	overflow: hidden;
	flex-grow:1;
}

.caption:hover {
	opacity: 1;
	transition: all 1s ease;
}

However, as soon as the text of the caption reaches the bounds of the image, it overflows, disregarding the overflow:hidden command. Did I forget something? I tried a several other commands (as described here: https://medium.com/@gaurav5430/css-flex-positioning-gotchas-child-expands-to-more-than-the-width-allowed-by-the-parent-799c37428dd6), but to no avail.

Maybe you have an idea. Thank you very much!

Hello everyone,

I wonder if there's an easy way to put caption inside the actual image, make it appear as an overlay?

I've arrived at this:

.caption{
    transform: translateY(-100%);
    padding: 20px;
	background: rgba(255, 255, 255, .8);
	opacity: 0;
	transition: all 1s ease;
}

.caption:hover {
	opacity: 1;
	transition: all 1s ease;
}

But it creates an unwanted (white) void at the bottom of the image (where the cation used to be) and also, the caption overlay does not fill the whole image.
See here. (the website I am working on)

Any clue how I could further work on this?
Thanks!

I forgot to add that you have to give the according rows on the site an ID, in this case it is "menu-section". So basically your rows will have to have an ID and CLASS for the effect and anchor to work.

The only thing that I haven't been able to work out is the situation that on load of the page, all links in the menu will be activated at once. I believe though that this is solvable by including the first header element into the variable ... not sure though.

EDIT: Just delete the first variable and that's it

$('nav a').addClass('menu-active')

Ok, so to whom it may concern, I've found a solution with a little script:

<script>
    jQuery(function ($) {
    $('nav a').addClass('menu-active')
    $(window).scroll(function () {
        var scrollPos = $(window).scrollTop();
        $('.menu-section').each(function (i) {
            var topPos = $(this).offset().top;
            if ((topPos - scrollPos) <= 80) {
                $('.menu-active').removeClass('menu-active')
                $('nav a').eq(i).addClass('menu-active')
            }
        })
    });
});
</script>

and according CSS, which can of course be dealt with as you please:

nav a.menu-active {
color: red;
}

To me, it seems nice and clean, but maybe some of you have suggestions how to make it more elegant? It might be a useful feature for future updates, including this as a setting where the other Anchor settings are.

Hello everybody,

Did any of you try and succeed making active Menu items (anchors) visible when scrolling down on the site? Like on this website here: https://make.studio/de/

By scrolling down, the currently visible section of the page is highlighted in the menu via an underline. I've read about JavaScript like ScrollSpy but haven't been able to comprehend its implementation. I feel like this could be a useful addition to the theme, though.

I'd be happy for any guidance in the right direction!
xx