Hey @Richard-K

Thanks for getting back to me on this.

Here is the code:

$('body').on('mousewheel touchmove', function(){
if($('.black').length){

        var windowOffset = $('.black').offset().top - $(window).scrollTop() - 19;
        
        if(windowOffset <= 0){
            $('.mobile-title svg path').css('fill', "#fff");
            $('.bread-crust-top').css('background', "#fff");
            $('.bread-crust-bottom').css('background', "#fff");
        } else {
            $('.mobile-title svg path').css('fill', "#000");
            $('.bread-crust-top').css('background', "#000");
            $('.bread-crust-bottom').css('background', "#000");
   }
}

});

Many thanks again and best wishes!

Hi @arminunruh and @Richard-K

I was wondering whether you could help me?

On my site (in the mobile viewport), I’m trying to set up a sitetitle (in svg format) and a menu nav (burger in svg) to change colour as your scroll between black and white backgrounds/rows. I’ve managed to almost make it work but the problem is that the logo and nav don’t change the colour immediately after entering into the relevant row. You need to scroll up or down a little bit in a opposite direction to make it switch colours. Could you advise how can I make it work in a smoother fashion?

Here is the link: http://foi.elmot.atthouse.pl/information

The logo and the nav should change the colour from black to white immediately after entering the black background and then reverse it when you scroll back to the white background.

This apparently is working flawlessly on Android devices at the moment, but not in Safari on iPhone 7 (iOS 14.2).

Many thanks in advance

@meddyait

right click on the stack and then click on edit HTML class and id. type something in the class section, for example rhubarb and then add the following code to the custom css and html -> custom css :

.rhubarb{
z-index: 100;
}

it should work

hi @arminunruh

Thanks for the reply. No worries about that. In the meantime, I was trying to resolve these issues myself and came to the following conclusions.

Re 1: You can fix this issue by adding a custom CSS class to the stack with w z-index included. Nonetheless, it would be great to have that fixed at some point.

Re 2: This is still an ongoing issue. The cover feature and full-screen slider lack compatibility in the mobile viewports, however, the rest of the issue can be resolved by adding the z-index in the custom CSS.

Re 3: This bug is still there, but, now I understand better what is causing it. If you place and centre video embed (i.e. Vimeo) in the mobile viewport with “Use Browser Height for Row Height” option and cover feature active, and then add another element such as text (like I did “Project information“ in the screenshot above) to the same row, the whole layout will go out of the window. If you remove the text element or place it in the stack together with the video embed, the site is coming back to normal.

Nothing new regarding 4 & 5

Anyone can help with this?

Hey @arminunruh and @Richard-Keith,

I hope you both are well.

I just wanted to highlight some issues/glitches with the theme that has been present (as well as reported) for a while now, hoping they can be fixed in the next theme update or so as they are stopping me (and maybe others too?) from publishing the site for a client.

1 — Stacks still get covered by a full-screen video background in the desktop and mobile viewports. This was already mentioned by me here (http://laythemeforum.com:4567/topic/5762/stack-gets-covered-by-a-full-screen-video-background/2). If you place a stack on a full-screen video background, then the video background will overlap the stack and you won’t be able to see the content of the aforementioned stack at all. (In the desktop viewport) you won't get this bug if you place normal text on the video background, but the issue will occur if you put the same text inside the stack.

CMS view:

Page after publishing:

2 — The cover feature still doesn’t seem to work on mobiles, unless you deactivate Fullscreen Slider in the plugin settings. This was previously reported here (http://laythemeforum.com:4567/topic/5448/cover-option-on-mobile-not-working?_=1594199322174). However, if you deactivate Fullscreen slider plugin, then any text placed on a full-screen video background gets overlapped by the video background. So this is almost exactly the same problem as the one described in point #1 above, but this time the text doesn’t even sit inside the stack. Problem disappears when you reactivate Fullscreen slider, but then the cover feature stops working again in the mobile viewport. That’s a vicious circle.

3 — I have a Vimeo embed centred on a page with “Use Browser Height for Row Height” switched on. If the Fullscreen slider is deactivated and the Cover feature is switched on, the video embed goes right to the top of the page instead of staying in the middle. If I disable the Cover feature or deactivate Fullscreen Slider plugin, then page goes back to normal and the arrangement of the elements on the page is correct.

4 — My Laytheme (which is licensed and updated to the latest version) seems to be lacking certain basic options in the Customiser, such as “Front Page”.

5 — Apart from all that, I‘m trying to make a fading rollover effect on the sitetitle and the primary nav using the following code from the Laytheme Documentation page and pasting it in the Customs CSS & HTML section:

/* site title transition /

.sitetitle.txt{
transition: all 600ms ease;
-webkit-transition: all 600ms ease;
}
/ navigation transition */
nav.primary a{
transition: all 600ms ease;
-webkit-transition: all 600ms ease;
}

But it seems to have no effect on the sitetitle as the colour is changing immediately, much faster than the aforementioned 600ms in the code. It works on the primary nav though. Could anyone help?

Unfortunately, I can’t post the link to the site publicly, but I will be more than happy to share it privately together with any other details that may be required.

Many thanks in advance for looking into this!

Nice to hear from you, @Richard-Keith Richard and thank you for the nice reply.
By the way, I’ve recently sent you a private message. Could you take a look when you find a second? Many thanks in advance!

Good wishes!
Z

@mariusjopen

Thank you for many years of tech support, answering questions, correcting custom code, etc.

All the best with your future endeavours.

Hi guys,

I’ve noticed that if you place a stack on a full screen video background, then the video will cover/overlap the stack and you won’t be able to see it as it’s underneath. Is there any way to bring the stack to front?

Cheers

Hi guys,

I have a feature request I’m hoping that you can consider.

Basically, it is an option to link the entire text box in the gridder, i.e. by utilising right click, the same way you are linking an image in the current version of Laytheme.

This is because currently you still can‘t make the entire linked text section change colour on hover all at once, if you have a line break inserted in the aforementioned text. I have highlighted this in a greater detail before in this thread: http://laythemeforum.com:4567/topic/4482/whole-text-section-to-change-colour-instead-of-only-one-line/3?_=1593948927858

This can be really frustrating when for instance you are using the following format for your projects:

PROJECT NAME
Client

…and want the entire thing linked up and change colour on hover.

I think more users would find it useful and beneficial than just me.

Thank you.