# 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:** 10

<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:** [September 15, 2023, 10:53am UTC](https://meta.discourse.org/t/adding-a-sticky-header-footer/273017/10 "2023-09-15T10:53:56Z")

</div>

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

* * *

> **Common / CSS**
>
> ```scss
> 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));  
> }
> 
> ```

---

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