[Anon User]

Hi

 

I would like to make the header of my site to shrink while I scroll down and still stick to the top of the page.

Is it possible to add some CSS for this?

 

Kind regards

[sujapati]

Hello Anon,

The sticky header with the shrink animation you desire for your site cannot be implemented using only CSS. It also requires JavaScript.

Regards,
Sujapati

[Anon User]

Will you be able to assist me with this?

[sujapati]

@Anon: Could you please provide us with your website URL so we can conduct a thorough inspection? This will allow us to deliver the tailored JS an CSS code required for your project.

Regards,
Sujapati

[Anon User]

Could you send me your email address or can you pull mine?

I would like exchange the information privately.

[sujapati]

@Anon: There is no need to share your login credentials. I only require the URL of your site. I can use Chrome’s Inspector Tool to conduct the necessary inspection securely.

[Anon User]

https://asphaltgroup.co.za/wp/

[sujapati]

@Anon: Please add JS and CSS below for the shrinking sticky header.

Javascript

let bodySelector = document.body; 
let headerWrap= document.querySelector('header') 
let headerHeight = headerWrap.offsetHeight 
window.addEventListener("scroll", () => { 
    if(window.scrollY > 0){ 
        bodySelector.style.paddingTop= headerHeight + 'px'
        bodySelector.classList.add('sticky'); 
    } else { 
        bodySelector.classList.remove('sticky');    
        bodySelector.style.paddingTop= 0 } 
});

You may need to install plugin to add the custom JS.  Please kindly refer the suggestions below  or any other available options.

https://en-ca.wordpress.org/plugins/custom-css-js/

CSS

.sticky .wp-site-blocks > div:first-child {
    position: fixed;
    z-index: 99;
    width: 100%;
    background: #fff;
    left: 0;
    right: 0;
    top: 0;
}
header h1.wp-block-heading {
    transition: all 0.4s
}
.sticky header h1.wp-block-heading {
    font-size: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.sticky header .uagb-container-inner-blocks-wrap .wp-block-columns {
    margin: 0;
}
.sticky header > .alignfull {
    margin: 0 !important;
}

 

Kind Regards,
Sujapati

[Anon User]

Thanks for the code, but I’m getting an error on line 4 and 5 of the java script code.

 

Error reads as follows: “Special characters must be escaped: “

[sujapati]

@Anon: If you are utilizing the plugin provided above, please be aware that custom JavaScript is added to the head element by default. Kindly select the footer element, as illustrated in the screenshot  below.

Please do inform us if any issues arise.

Kind Regards,
Sujapati

[Author]

Posts