# Logo in docked header bar

**URL:** https://meta.discourse.org/t/logo-in-docked-header-bar/216199
**Category:** Support
**Created:** [January 27, 2022, 2:48pm UTC](https://meta.discourse.org/t/logo-in-docked-header-bar/216199 "2022-01-27T14:48:10Z")
**Posts on this page:** 1
**Showing post:** 2

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [January 27, 2022, 4:11pm UTC](https://meta.discourse.org/t/logo-in-docked-header-bar/216199/2 "2022-01-27T16:11:38Z")

</div>

Hello

I think you can use for this @Johani 's fantastic solution.

> [@Header scroll shadow](https://meta.discourse.org/t/header-scroll-shadow/198021/4):
>
> You can add something like to the header tab of your theme \<div class="header-anchor"\>\</div\> \<script type="text/discourse-plugin" version="0.8"\> if (!"IntersectionObserver" in window) return; const { on } = require("discourse-common/utils/decorators"); const stickyClass = "sticky"; api.modifyClass("component:site-header", { @on("didInsertElement") stickyHeaderCheck() { const anchor = document.querySelector(".header-anchor"); const header = this.element; new IntersectionObse…

* * *

Something like this ⏬

Create a new component and add the following.

**Header section**

```plaintext
<div class="header-anchor"></div>

<script type="text/discourse-plugin" version="0.8">
if (!"IntersectionObserver" in window) return;

const { on } = require("discourse-common/utils/decorators");

const stickyClass = "sticky";

api.modifyClass("component:site-header", {
  @on("didInsertElement")
  stickyHeaderCheck() {
    const anchor = document.querySelector(".header-anchor");
    const header = this.element;

    new IntersectionObserver(entries => {
      if (!entries[0].isIntersecting) {
        header.classList.add(stickyClass);
      } else {
        header.classList.remove(stickyClass);
      }
    }).observe(anchor);
  }
});
</script>

```

**CSS section**

```plaintext
.d-header {
  #site-logo.logo-big {
    display: none;
  }
  .sticky & {
    #site-logo.logo-big {
      display: inline;
    }
  }
}

```

This will hide the logo on top and only show when you scrolling.

---

_[View the full topic](https://meta.discourse.org/t/logo-in-docked-header-bar/216199)._