# Smaller Logo in the Divi Fixed Header

> Shrinks the logo smoothly when Divi's header becomes fixed while scrolling, so the sticky header takes less room on screen.

- Type: CSS
- Runs: Site-wide header
- Category: [Page Builders & Themes](https://wpide.com/library/category/page-builders/)
- Tags: divi, header, logo
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/divi-smaller-logo-fixed-header/

## Code

```css
#logo {
    transition: max-height 0.3s ease, transform 0.3s ease;
}

.et-fixed-header #logo {
    max-height: 60% !important;
}

@media (prefers-reduced-motion: reduce) {
    #logo {
        transition: none;
    }
}
```

## Notes

Change 60% to make the scrolled logo bigger or smaller. Applies to Divi's default header, not Theme Builder headers.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Smaller Logo in the Divi Fixed Header" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/