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

<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, 2:42pm UTC](https://meta.discourse.org/t/adding-a-sticky-header-footer/273017/6 "2023-07-27T14:42:25Z")

</div>

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

---

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