How to Shrink Header & Logo on Scroll in Elementor Pro WordPress | Reduce Logo

Published: 27 August 2024
on channel: WebTask With Hassan
53
2

In this wordpress tutorial for beginners you will learn how to reduce header and logo size on page scrolling in elementor / elementor pro website page builder plugin. On scrolling header and logo height shrinking using CSS Class and Custom CSS in wordpress website.

Add CSS Class " logoreduce " in Image / Logo advanced setting.

** Add Custom CSS:

.logoreduce img{
transition: width .4s ease;
}
.elementor-sticky--active .logoreduce img {
width: 60px !important;
}

*** In css you can add width on header scrolling according to your requirement.


#header #logo #image #scroll #shrinking #css #class #elementor #elementorpro #elementorpagebuilder #wordpress #wordpresstutorial #webtaskwithhassan #hassangilani


Watch video How to Shrink Header & Logo on Scroll in Elementor Pro WordPress | Reduce Logo online without registration, duration hours minute second in high quality. This video was added by user WebTask With Hassan 27 August 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 53 once and liked it 2 people.