Lay Theme Forum

Hello, you gotta put a thumbnail image. Perhaps you have deleted the thumbnail image in your media library

Hello everybody,

I tried changing my menu color on specific slides of a fullscreen slider with the code below but it didn't work. The page I tried it on is https://www.domaine-des-creisses.com/les-creisses/.

The code is :

CSS :
@media (min-width: 601px) {
/* White menu and logo on specific slides */
body.slug-les-creisses.custom-slide-1 .sitetitle-txt-inner span,
body.slug-les-creisses.custom-slide-1 nav.primary a,
body.slug-les-creisses.custom-slide-1 nav.laynav a,
body.slug-les-creisses.custom-slide-2 .sitetitle-txt-inner span,
body.slug-les-creisses.custom-slide-2 nav.primary a,
body.slug-les-creisses.custom-slide-2 nav.laynav a {
color: white !important;
border-bottom-color: white !important;
}

/* Instant transition for color and underline */
.sitetitle-txt-inner span,
nav.primary a,
nav.laynav a {
    transition: color 0s ease, border-bottom-color 0s ease;
}

/* Underline for active menu items */
nav.laynav .current-menu-item > a span {
    border-bottom-color: white !important;
}

}

JS :
<script>
// Function to update the colors of the menu and logo
function updateMenuColors() {
const siteTitle = document.querySelector('.sitetitle.position-top.is-fixed.img img');
const body = document.body;
const navItems = document.querySelectorAll('nav.primary a, nav.laynav a');

if (body.classList.contains('slug-les-creisses')) {
    const slides = document.querySelectorAll('.row');
    let isCustomSlideActive = false;

    // Check if a custom slide is active
    slides.forEach(slide => {
        if (slide.classList.contains('fp-section') && slide.classList.contains('fp-completely')) {
            if (slide.classList.contains('custom-slide-1') || slide.classList.contains('custom-slide-2')) {
                isCustomSlideActive = true;
            }
        }
    });

    // Update colors based on the active slide
    if (isCustomSlideActive) {
        siteTitle.src = 'http://www.domaine-des-creisses.com/wp-content/uploads/2024/06/LOGO-BLANC-1.svg';
        navItems.forEach(el => {
            el.style.color = 'white';
            el.style.borderBottomColor = 'white'; // For underline
        });
    } else {
        siteTitle.src = 'http://www.domaine-des-creisses.com/wp-content/uploads/2024/06/TAMPON-ROUGE-SANG.svg';
        navItems.forEach(el => {
            el.style.color = '';
            el.style.borderBottomColor = ''; // Reset to original underline color
        });
    }
}

}

// Initialize the updateMenuColors function on new page shown
window.laytheme.on("newpageshown", function() {
updateMenuColors();
jQuery(document).on('mousewheel', function() {
updateMenuColors();
});
jQuery('.fp-controlArrow, .fp-slidesNav a').on('click', function() {
setTimeout(updateMenuColors, 10);
});
});

// Ensure updateMenuColors runs on page load, scroll, and new page shown
jQuery(document).ready(function() {
updateMenuColors();
jQuery(document).on('newpageshown', function() {
updateMenuColors();
});
jQuery(document).on('scroll', function() {
updateMenuColors();
});
});
</script>

I hope yall can help,

Have a good day

Thank you so much for this. I am going to try to make it work by myself and if I need more help on the website I will keep you up to work with you.
Thank you again for that, it helps a lot !
Have a good evening !

I didn't mean to bother you sorry, I just noticed I didn't mention your name in the first message so I didn't know if you were going to see it.
It's as you can, and if anything I am willing to pay as well. Thanks again for your help.

@arminunruh *

Hi Armin, I sent you everything at info@laytheme.com, thank you for your help !

@arminunruh I tried to add some js and CSS. I first wrote enabled the project description feature and then disabled the feature, my goal was to reach the project description with the js even it's disabled and make it appear when I hover it. The hover works but it doesn't make the description appear... Here are my custom CSS and JS :
CSS :
/* Thumbnail grid style /
.thumbnail-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 5px; / Adds spacing around the grid /
margin: 0; / Removes default margins /
list-style: none; / Removes list bullets /
position: relative; / Relative position to manage z-index */
}

/* Thumbnail style */
.thumbnail-wrap {
position: relative;
}

/* Hover effect to display project description /
.thumbnail-wrap:hover::before {
content: attr(data-description); / Displays project description /
position: fixed;
top: 40px;
left: 8px;
padding: 10px; / Adds spacing around description /
background-color: rgba(0, 0, 0, 0.5); / Semi-transparent background color /
color: white; / Text color /
z-index: 9999; / Ensures description is above any other content */
}

/* Footer */
#footer-region {
position: fixed;
bottom: 20px;
left: 8px;
}

JS :
<script>
// Select all project thumbnails
const thumbnails = document.querySelectorAll('.thumbnail-wrap');

// Iterate through each thumbnail
thumbnails.forEach(thumbnail => {
// Listen for hover event
thumbnail.addEventListener('mouseenter', () => {
// Get corresponding project description
const description = thumbnail.querySelector('.descr');
if (description) {
// Add description as a data attribute for use in CSS
thumbnail.setAttribute('data-description', description.textContent.trim());
}
});
});
</script>

Do you have any tips to make it work ?

Thanks by advance

G

Website link : https://www.gabrielchesnelong.com/

Thank you for your help, I am going to try that !

Hi everyone,

I have a thumbnail grid on my website :


I was wondering if it was possible to hover these thumbnails images to make appear a fixed/sticky text (that would be the description) like this :


Thanks by advance

G

website : https://www.gabrielchesnelong.com/category/project-index/

Thank you for your answer @arminunruh !

Hi there,

I am trying to separate my filter tags from my thumbnail grid. I've seen a few discussions about it here but it didn't work...

What I have for the moment is this :

I am trying to put the filters on the left and keep them sticky so I can scroll while seeing them with (ideally) custom buttons and to make it look like this :