Webmaster Freelance à Strasbourg | Comment Créer Un Sticky Header Sur WordPress Avec Elementor Pro

Freelance Webmaster

>
Comment créer un sticky Header sur WordPress avec Elementor Pro

Comment créer un sticky Header sur WordPress avec Elementor Pro

Publié le 11/06/2024
Elementor tutoriel

Sommaire

Découvrez toutes les offres digitales

Transformez votre design Figma en un site WordPress.

Code personnalisé

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.addEventListener('scroll', function() {
        let y = window.scrollY;
        let menupicstudios = document.getElementById('menupicstudios');
        if (y > 150) { /* change this value here to make it show up at your desired scroll location. */
            menupicstudios.classList.add('headershow');
        } else {
            menupicstudios.classList.remove('headershow');
        }
    });
});
</script>
<style>
.elementor-nav-menu__container{
top:0px!important;
}
#menupicstudios.headershow{
transform: translateY(0);
}
#menupicstudios{
position: fixed;
top:0;
width: 100%;
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
transform: translateY(-200px); /*adjust this value to the height of your header*/
}
</style>

Je vous accompagne dans la création de votre site WordPress