# Big header, scroll down, make header small (Like default size)

**URL:** <https://meta.discourse.org/t/big-header-scroll-down-make-header-small-like-default-size/32201>\
**Category:** Support\
**Created:** [8월 17, 2015, 10:00오전 UTC](https://meta.discourse.org/t/big-header-scroll-down-make-header-small-like-default-size/32201 "2015-08-17T10:00:56Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)\
**Post date:** [5월 7, 2016, 12:46오전 UTC](https://meta.discourse.org/t/big-header-scroll-down-make-header-small-like-default-size/32201/4 "2016-05-07T00:46:41Z")

</div>

You might be able to do something like that by putting the big logo in a custom header (admin\>customize\>css/html/new). Add a header to the ‘Header’ section of the editor:

```html
<div class="wrap brand-header">
    <a href="<!-- your forum url -->">
        <img class="brand-logo" src="<!-- link to big logo -->">
    </a>
</div>

```

You could add some css to hide the regular sized forum logo until the custom header has scrolled out of view:

```css
.brand-header .brand-logo {
    /* this moves it down a bit, this could be improved */
    position: relative;
    top: 25px;
    z-index: 1200;
}

/* hides the site logo when the custom header is in view */
.d-header #site-logo {
    display: none;
}

/* displays the site logo now that the custom header has scrolled out of view */
.docked .d-header #site-logo {
    display: inline;
}

```

This works, but is barely tested. Use at your own risk.

---

_[View the full topic](https://meta.discourse.org/t/big-header-scroll-down-make-header-small-like-default-size/32201)._