# Adding a sticky header & footer

**URL:** <https://meta.discourse.org/t/adding-a-sticky-header-footer/273017>\
**Category:** Development\
**Created:** [July 27, 2023, 7:14am UTC](https://meta.discourse.org/t/adding-a-sticky-header-footer/273017 "2023-07-27T07:14:22Z")\
**Posts on this page:** 1\
**Showing post:** 3

<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:** [July 27, 2023, 9:25am UTC](https://meta.discourse.org/t/adding-a-sticky-header-footer/273017/3 "2023-07-27T09:25:21Z")

</div>

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

```xml
<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

```scss
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);
  }  
}

```

---

_[View the full topic](https://meta.discourse.org/t/adding-a-sticky-header-footer/273017)._