Adding a sticky header & footer

[Shaneod (Shane)]

Hi Guys,

Looking into hosting some ads, I am using the official ad plugin which is great in that it allows you to add assets to various points on the site.

However talking to ad agency and it seems to get the best ad visibility on mobile, which most of my traffic is, is by using sticky ads either in the header or footer.

The issue is of course that a sticky ad along the footer will overlay important buttons and impact UX which is a no-no.

Is there a day to pad the bottom of the site up the heights of a banner, so that the sticky banner wouldn’t impact important UX elements? I don’t want users to have to close the banner ad before they can reply or use the post count to scroll down a thread.

Also with the sticky header on Discourse, will that be impacted by a sticky banner or could the banner sit above the discourse navbar?

Or is this something the ad agency should be able to solve with their ad tech?

Thanks,

Shane

[Shaneod (Shane)]

I’m thinking I can add possibly add some padding to the bottom of the body so that the sticky footer ad banner would not overlay the reply buttons and then on the reply-control box that popups up I might be able to set a z-index so that it comes up over the banner ad?

Just wondering if anyone has successfully implemented sticky header and/or footer banner ads on mobile without impacting user experience.

[Don]

Hello

It’s possible but it depends lot of thing. Can you share your site url?

I would use plugin outlet and put the banner inside. Set the plugin-outlet height equal with banner height, it will add the necessary spaces.

Something like this. Note: This is just a quick example, I hope it will add some idea for you to achieve it. We can do more if you share more info and your site url to check this etc…

Mobile / Header

<script type="text/x-handlebars" data-template-name="/connectors/above-site-header/top-banner">
  <div class="test-top-banner"></div>
</script>

<script type="text/x-handlebars" data-template-name="/connectors/below-footer/bottom-banner">
  <div class="test-bottom-banner"></div>
</script>

Mobile / CSS

body {
  --banner-height: 40px;
  
  .d-header-wrap {
    top: var(--banner-height);
  }

  .above-site-header-outlet.top-banner {
    @include sticky;
    top: 0;
    width: 100%;
    height: var(--banner-height);
    z-index: z("header");
    .test-top-banner {
      width: 100%;
      height: var(--banner-height);
      background: red;
    }
  }

  .below-footer-outlet.bottom-banner {
    @include sticky;
    bottom: env(safe-area-inset-bottom);
    width: 100%;
    height: var(--banner-height);
    z-index: z("header");
    .test-bottom-banner {
      width: 100%;
      height: var(--banner-height);
      background: red;
    }
  }
  
  #topic-progress-wrapper:not(.docked) {
    margin-bottom: var(--banner-height);
  }  
}

[Shaneod (Shane)]

Hi @Don - thanks for getting back, I was thinking something like that might be required alright.

[Shaneod (Shane)]

Hi @Don How would that implementation work when you try to reply on mobile?

[Don]

It works but the top banner makes the composer smaller.

It probably better to hide banner when the composer is open.

There is a class .composer-open what you can target here to hide the banner when the composer is open.

Mobile / CSS

body {
--banner-height: 40px;
  // Header
  .d-header-wrap {
    top: var(--banner-height);
    transition: top 0.25s ease-in;
    .composer-open & {
      top: 0;
    }
  }
  // Top banner
  .above-site-header-outlet.top-banner {
    @include sticky;
    top: 0;
    width: 100%;
    height: var(--banner-height);
    transition: height 0.25s ease-in;
    z-index: z("header");
    .test-top-banner {
      width: 100%;
      height: var(--banner-height);
      background: red;
      transition: height 0.25s ease-in;
      .composer-open & {
        height: 0;
      }
    }
    .composer-open & {
      height: 0;
    }
  }
  // Bottom banner
  .below-footer-outlet.bottom-banner {
    @include sticky;
    bottom: env(safe-area-inset-bottom);
    width: 100%;
    height: var(--banner-height);
    z-index: z("header");
    .test-bottom-banner {
      width: 100%;
      height: var(--banner-height);
      background: red;
    }
  }
  // Move topic progress wrapper the top of the bottom banner
  #topic-progress-wrapper:not(.docked) {
    margin-bottom: var(--banner-height);
    .composer-open & {
      margin-bottom: 0;
    }
  }
  // Add banner height to composer max height calculation
  &:not(.ios-safari-composer-hacks) #reply-control.open {
    max-height: calc(100vh - var(--header-offset) + var(--banner-height));
  }  
}

Edit: I made some correction on the code.

[Shaneod (Shane)]

Ah man, thanks a million for this help - brilliant stuff!

[Shaneod (Shane)]

Hey @Don - i have a test of that working great on the mobile, just adding it to desktop and it looks like it should work but there’s a slight issue when you hit reply, unlike on the mobile where the stick area disappears, on desktop it stays in place, is there a CSS hook for the composer opening on desktop?

[Shaneod (Shane)]

Hi @Don - any idea how to close the footer when on desktop, the mobile version works great but i can’t seem to figure out how to remove the stick element when you open the reply box on the desktop by hitting reply, it’s CSS beyond my skill level.

Thanks

[Don]

Hello @Shaneod

Sorry for the delay. The code I write above is placed in the mobile section so it only works on mobile. I changed the code to fits on desktop too. You have to place this in common section and remove the existing one from mobile.

Here is the updated which works on desktop and mobile too.

Common / Header

<script type="text/x-handlebars" data-template-name="/connectors/above-site-header/top-banner">
  <div class="test-top-banner"></div>
</script>

<script type="text/x-handlebars" data-template-name="/connectors/below-footer/bottom-banner">
  <div class="test-bottom-banner"></div>
</script>

---

Common / CSS

body {
  --banner-height: 40px;
}

.d-header-wrap {
  top: var(--banner-height);
  transition: top 0.25s ease-in;
  .composer-open & {
    top: 0;
  }
}
  
.sidebar-wrapper {
  html:not(.composer-open) & {
    height: calc(var(--composer-vh, var(--1dvh)) * 100 - var(--header-offset, 0px) - var(--banner-height));
  }
}

.above-site-header-outlet.top-banner {
  @include sticky;
  top: 0;
  width: 100%;
  height: var(--banner-height);
  transition: height 0.25s ease-in;
  z-index: z("header");
  .test-top-banner {
    width: 100%;
    height: var(--banner-height);
    background: red;
  }
  .composer-open & {
    height: 0;
  }
}

.below-footer-outlet.bottom-banner {
  @include sticky;
  bottom: env(safe-area-inset-bottom);
  width: 100%;
  html:not(.composer-open) & {
    height: var(--banner-height);
  }
  z-index: z("composer", "content") - 1;
  .test-bottom-banner {
    width: 100%;
    height: var(--banner-height);
    background: red;
  }
}
  
#topic-progress-wrapper:not(.docked) {
  margin-bottom: var(--banner-height);
  .composer-open & {
    margin-bottom: 0;
  }
}
  
body:not(.ios-safari-composer-hacks) #reply-control.open {
  max-height: calc(100vh - var(--header-offset) + var(--banner-height));  
}

[ozkn (Mathx)]

Can google ads be shown in these areas? @Don

[Shaneod (Shane)]

Thanks @Don much appreciated buddy!

[Shaneod (Shane)]

@ozkn

Can google ads be shown in these areas? @Don

Yeah, i have placed a sticky ad in the footer area Don’s hiding of the sticky area when you are replying means that the ad doesn’t interfere with the usability of the site!