Javascript - Elementor Code:
// Elementor Code
// header color change on scroll
<script>
window.addEventListener('scroll', function (){
var header = document.querySelector('.mainheader'); // < Header class goes here
var windowPosition = window.scrollY > 0;
header.classList.toggle('scrolling-active',windowPosition );
if(windowPosition){
header.style.padding = '10px 0px'; // < change header height on scroll here
} else{
header.style.padding = '';
}
});
</script>
Javascript - WP Code Snippets:
// WP Code Snippets
add_action( 'wp_head', function () { ?>
<script>
// header color change on scroll
window.addEventListener('scroll', function (){
var header = document.querySelector('.mainheader'); // < Header class goes here
var windowPosition = window.scrollY > 0;
header.classList.toggle('scrolling-active',windowPosition );
if(windowPosition){
header.style.padding = '10px 0px'; // < change header height on scroll here
} else{
header.style.padding = '';
}
});
</script>
CSS:
/* Header Class: mainheader */
/* Logo Class: nav-logo */
/* Menu Text class: mainnav */
/* Button CTA Class: nav-cta */
/* Header Section */
.mainheader {
position: fixed;
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
transition: background-color .5s ease;
}
/* backgroung color on scroll */
.scrolling-active{
background-color: black;
transition: padding .5s ease;
}
/* button color on scroll */
.scrolling-active .nav-cta .elementor-button {
background-color: white !important;
color: black;
}
/* menu text color change on scroll */
.scrolling-active .mainnav a{
color: white !important;
}
/* logo change and shrink on scroll */
.scrolling-active .nav-logo {
content: url(#);
width: 130px;
transition: width .5s ease;
}
/* logo change and shrink on scroll for tablet*/
@media only screen and (max-width: 1025px){
.scrolling-active .nav-logo {
width: 130px;
}
}
/* logo change and shrink on scroll for mobile*/
@media only screen and (max-width: 768px){
.scrolling-active .nav-logo {
width: 100px;
}
}
