Logo in docked header bar

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

2 Likes
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.