Lay Theme Forum

oh yea so the text needs to be hidden by default

you can use css to have it hidden at the start

in lay options → custom css & html → custom css:

#footer-region{ opacity: 0; }

im not sure!

maybe its better if you insert the html into lay options -> custom css & html

in an html field

then use css to hide/show it based on the page

you can also use position: sticky; instead of position: fixed;

you can also use the older version of lay theme and the older versions of plugins, that u can get on laykeymanager.com

Ah, I see — thanks for explaining.

@arminunruh thank you!

thanks!

can u send your ftp login too please? i made a mistake

if u update lay theme that setting will be available now

@arminunruh

Can confirm, that the duplicated content in the element grid in the gridder is gone, thank you!

yes please do so!

can you send your website address, /wp-admin/ username and password and a link to this topic to info@laytheme.com?

i need your ftp login too

u need to click on one image on the left like here:
Screenshot 2022-06-20 at 18.21.35.png

Dear Des @DLB

The row itself is empty within the Gridder but has been given a custom class called parallax. You can do this by 'right-clicking' on the row "set HTML Class and ID" :

Screen Shot 2022-05-10 at 12.03.55 PM.png

You can see here the Row is empty of content but has the class:
Screen Shot 2022-05-10 at 11.43.40 AM.png

They have some custom CSS:

@media (min-width: 601px){nav.second_menu li:last-child { display: none; } img.lazyloaded, .col img.lazyloaded { height: 100vh; object-fit:cover; } .hero-section { width: 100%; height: 100vh; object-fit:cover; overflow: hidden; position: relative; } .hero-section img { width: 100%; position: absolute; top: 0; left: 50%; transform: translate(-50%); } .parallax { /* The image used */ background-image: url("https://bodyandspace.de/wp-content/uploads/2021/05/PRO22454.jpg"); /* Set a specific height */ min-height: 500px; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }}

You can see the image is applied to the row as a background via URL.

This link will help you with inspecting behind the scenes of website to find out how they work:

https://www.khanacademy.org/computing/computer-programming/html-css/web-development-tools/a/using-the-browser-developer-tools

https://laytheme.com/documentation/custom-css-styling.html

Best Richard

Thanks Des Have a wonderful day and best of luck with your website, it's looking great 💥🌝

Best wishes @DLB Richard

@Des

Awesome!

Good luck and have a great day
Rich

Dear @sebht

Cool Website! :)

The Click function doesn't work for me.

Screen Shot 2020-08-12 at 5.44.59 PM.png

But i see your <Script> did you take the class away from the PNG X?

Screen Shot 2020-08-12 at 5.47.02 PM.png

Best
Richard

Hey @arminunruh ,

Thanks for this.

For some projects which have dark backgrounds / images on the first row, I have the sitetitle and nav load in white (instead of on scroll / mouse move). Using this code in the Custom CSS & HTML…

jQuery(window).on("fpAfterLoad", function(){

However, I do not have the fullscreen slider enabled for the mobile version of the site, so this code doesn’t work on mobiles.

If I use this code it works for both desktop and mobile, but of course only on scroll, not on load.

jQuery(window).on("scroll", function(){

I did try this, but it didn’t work…

jQuery(window).on("load", function(){

Is there a way for this to work on load for the mobile version, which doesn’t have fullscreen slider enabled? Have been trying, but can’t find a solution.

Also, could it work if the mobile-title was an SVG? For the mobile version, it uses the desktop menu, but want to have the mobile-title different (just my initials) so it fits on the same line as the menu.

Link: https://deslloydbehari.co.uk/portfolio/crimea-crisis

Thanks,

D

Hey everybody

Sorry about this

If you have gotten an email by your WordPress site with a link to access recovery mode, please enter your /wp-admin/ using recovery mode.

There, update lay theme and then it should work again.

If you that doesn't work please send an email to info@laytheme.com with a link to this topic so I know what it's about and I'll send you a link to the working lay theme file and instructions.

Thanks @arminunruh

I have just emailed the details requested to you!

Dear @Des

Do you have any third-party plugins installed or CUSTOM JS code? Is it possible to deactivate it for a moment to see if the problem remains?

Also you can use a different layout for mobile.

Have a look into that.

Best!

Marius

actually you can use custom css:
lay options → custom css & html → custom css for mobile version

.lay-carousel .slide-text { padding-left: 60px!important; padding-right: 60px!important; }

Dear @Des
it is a bit complex to jump right in and present you the solution on a silver platter.

But I would work in steps.
First. Good that you have the animation in place.
Then you need to remove it when the lazyload says: All done.

Have a look here for jQuery use:
http://laytheme.com/documentation.html#custom-javascript

Instead of adding anything to the image with Javascript, you can output a console.log("TEST"); to see if the image is loaded. Then you can add a class called invisible to the image.

Hope that gives you a rough direction.

Well done until now!

Best!

Marius

Dear @Des
yes. This should work.

Best!

Marius