Dear @wua-frank
Will forward to Armin for some insight ✅
Will forward to Armin for some insight ✅
Thank you for the Valid input, I agree the Customizer has some UI issues with Navigation. I personally have always found ways around this, but that doesn't mean there isn't room for improvement.
This has been added to the Development notes & forwarded to Armin ✅
Dear @acmarion
Amazing! :)
Thank you so much for helping to build a stronger community.
Sincerely
Richard
Dear @Hayo-Gebauer
Lovely website :)
Could you please add the following code to 'Lay Options - Custom CSS & HTML' and let me know if this helps?
a.row-bg-link.no-row-bg-link-children {
z-index: 10 !important;
}
Not exactly sure at first look why this is happening, but its to do with the text area, overlapping the row's link:
Unsure if its a design issue or a Bug, Talk soon :)
Richard
This will take some custom coding but it's a worthy pursuit & good idea 🌝
The main thing is to understand how the images appear and then mimic that but slightly differently.
There is the lay-imagehover-region
. This is the parent container that holds all the images waiting behind the scenes.
The images and the container have an opacity of zero - opacity:0;
When you hover or 'mouseover' a project link the class show
is added to the image hover region as well as the image that relates to that link.
You can see this behaviour here:
And now when 'mouseover':
When the class show
is added to these elements it comes with new CSS instructions.
This CSS:
.lay-imagehover-region img {
opacity: 0 !important;
position: fixed;
pointer-events: none;
top: 0;
left: 0;
}
Changes to:
.lay-imagehover-region img.show {
opacity: 1 !important;
position: fixed;
pointer-events: none;
top: 0;
left: 0;
}
Notice the opacity change to 1 (invisible to visible) & the class 'show' added to the CSS selections.
So to breakdown - On mouseover add 'show' and when you remove the mouse - remove the class show
For you to achieve your result you need to say:
On mouseover add "show" without the "remove show". 🌝
Just remember you dont need the removeClass
function.
Currently not without coding an accordion - there are threads on this forum where users have done that and also simple ones online that you could implement.
This is a great idea though and will happily add to the development notes 🌝
"So I'm wondering how I could link different images to the same project."
Rather than duplicating each Project multiple times, i would suggest just making the layout in the Gridder and defining a link for them:
This method should give you the most control in the future should you decide to change something 👍
Thanks for the concise bug report. 👍
The following code should be 5% if that's what you defined in the "Set Frame" settings:
#grid .push-0.not-first-child {
margin-left: 2%;
}
Here with it changed to 5% you get the correct result:
#grid .push-0.not-first-child {
margin-left: 5%;
}
If you can confirm it's not a third-party plugin & its not your "Custom Head Content"
Will forward this to Armin ✅
Please send your website address, /wp-admin/ username and password and a link to this topic to info@laytheme.com?
Within the code:
#lightbox-inner .swiper-slide img {
max-width: 60vh !important;
}
You can change the value from 60vh to whatever you need to fit the images how you like. I was not able to recreate the bug on any test site so i don't know why you have this issue. It could be the image files themselves but unsure sorry.
Thanks for the message,|
I'd like the spacing on the left of the mobile screen to line up with the site title. Not have such large padding on the left.
If you cannot set the caption dimensions for Mobile because they are already set up for Desktop in a certain way, then the following code you can use to define the caption left padding:
.lay-carousel-sink-parent .single-caption {
padding-left: 25px !important;
}
Also... the arrow position - I'd like that to have the same left and bottom margin as the site title on mobile, as it does on desktop.
You can define the left margin to be the same as your site title in > customize > Project arrows >
If the arrows are set to 'center' normally and need them set to 'bottom' on mobile this would need to be custom coded, something like:
.project-arrow.center {
top: 90vh;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
You can see here the class .center
this is applied if set to 'center' within the project arrow settings.
The following code will target the background on hover.
.sitetitle:hover {
background-color:black;
}
You can change the text colour when hovering within > Customize > Site title >
I would suggest doing it there rather than using custom code 🌝
If the following is true:
Wordpress, Lay Theme & Laytheme's Addons are all up to date ?
Any custom CSS or JS that may interfere is temporarily removed.
Any third-party plugins are de-activated to see if this resolves the issue.
And the settings have been properly applied:
Then this is likely a Bug and Armin will need to inspect:
Please send your website address, /wp-admin/ username and password and a link to this topic to info@laytheme.com?
Thanks @edgrbnz have noted this feedback, have a wonderful day 🌝