# Make header logo to shrink on scroll?

**URL:** <https://community.hubspot.com/t/make-header-logo-to-shrink-on-scroll/88546>\
**Category:** CMS Development\
**Tags:** website-pages\
**Created:** [August 29, 2023, 5:18pm UTC](https://community.hubspot.com/t/make-header-logo-to-shrink-on-scroll/88546 "2023-08-29T17:18:01Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![AThurlow](https://avatars.discourse-cdn.com/v4/letter/a/35a633/32.png) [@AThurlow](https://community.hubspot.com/u/AThurlow)\
**Post date:** [August 29, 2023, 5:18pm UTC](https://community.hubspot.com/t/make-header-logo-to-shrink-on-scroll/88546/1 "2023-08-29T17:18:01Z")

</div>

The header logo on our website won’t shrink on scroll. I’d like the logo to get a lot smaller when you scroll down, but not disappear completely. We have tinkered around but can’t figure it out.

Our homepage: [https://www.thepeakok.com/](https://www.thepeakok.com/)

---

<div class="post-metadata">

**Author:** ![LastRose](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/lastrose/32/193281_2.png) [@LastRose](https://community.hubspot.com/u/LastRose)\
**Post date:** [August 31, 2023, 12:27pm UTC](https://community.hubspot.com/t/make-header-logo-to-shrink-on-scroll/88546/2 "2023-08-31T12:27:10Z")

</div>

Since the width and height are being set on the image, you would need to use !important in the css. Right now I’m seeing that you are applying a height of 50 when you scroll. Just change that to

`height: 50px !important;`

and it should work. That said, it will probably sqush the image. You would be better to change the width instead (again using !important, so for example

`width: 200px !important;`

)