Tagged: Shrinking Header
- This topic has 9 replies, 2 voices, and was last updated 1 month, 2 weeks ago by
sujapati.
-
AuthorPosts
-
July 24, 2024 at 1:03 am #336697
Anon User
ParticipantHi
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
July 24, 2024 at 2:52 am #336699sujapati
KeymasterHello Anon,
The sticky header with the shrink animation you desire for your site cannot be implemented using only CSS. It also requires JavaScript.
Regards,
SujapatiJuly 24, 2024 at 2:55 am #336700Anon User
ParticipantWill you be able to assist me with this?
July 24, 2024 at 3:20 am #336701sujapati
Keymaster@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,
SujapatiJuly 24, 2024 at 4:17 am #336702Anon User
ParticipantCould you send me your email address or can you pull mine?
I would like exchange the information privately.
July 24, 2024 at 4:57 am #336703sujapati
Keymaster@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.
July 24, 2024 at 5:31 am #336704Anon User
ParticipantJuly 24, 2024 at 7:52 am #336705sujapati
Keymaster@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,
SujapatiJuly 24, 2024 at 8:13 am #336709Anon User
ParticipantThanks 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: “
July 25, 2024 at 12:54 am #336723 -
AuthorPosts
- You must be logged in to reply to this topic.