Logo in docked header bar

Product Support

AI-generated summary

helmi is seeking a workaround to hide the default Discourse logo in the header bar when using a custom header, as their previous CSS solution stopped working after Beta 10 or 11. They mention using a .docked class to toggle logo visibility based on scroll position but note that this approach no longer functions as expected. Don suggests using Johani’s solution involving an IntersectionObserver to dynamically add a .sticky class to the header when it reaches the top of the viewport. This allows CSS to toggle the logo’s visibility: hidden by default, shown only when .sticky is applied. The proposed code includes a component with a header anchor and JavaScript to detect scroll position, paired with CSS targeting .d-header and .sticky & to control logo display. This method avoids reliance on deprecated or changed class behaviors and offers a modern, scroll-aware alternative.

1

On our forums we use an additional header above the discord header bar. So far we used some css to hide the logo from this header bar as we used an additional Logo in our own (additional) header.

That’s the code we used:

.d-header #site-logo.logo-big { display: none; }
.docked .d-header #site-logo.logo-big { display: inline; }

.docked was added as a class to the header container as soon as the header was touching the upper end of the viewport. This behaviour seems to have changed with either Beta 10 or 11.

Does anyone do similar things and has a workaround for that? As far as I could see there isn’t really anything that helps me doing something like that with CSS. I noticed the --header-offset property on the html tag but I’m not sure if that’s usable for this kind of stuff.

Any ideas welcome :wink:

2

Hello

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

Something like this :arrow_double_down:

Create a new component and add the following.

Header section

<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

.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.