diff --git a/tobago-core/src/main/resources/scss/_tobago.scss b/tobago-core/src/main/resources/scss/_tobago.scss
index 6b972be..08d89b4 100644
--- a/tobago-core/src/main/resources/scss/_tobago.scss
+++ b/tobago-core/src/main/resources/scss/_tobago.scss
@@ -73,6 +73,9 @@
 $input-focus-box-shadow: $input-btn-focus-box-shadow !default;
 $form-check-inline-input-margin-x: 0.75rem;
 $input-placeholder-color: $gray-600 !default;
+$grid-gutter-width: 30px !default;
+
+$page-padding-top: 1rem;
 
 /* used icons ---------------------------------------------------- */
 
@@ -326,7 +329,10 @@
   margin-bottom: 1rem;
 
   &.fixed-top {
-    margin-bottom: 0;
+    position: sticky;
+    margin-top: -$page-padding-top;
+    margin-left: -($grid-gutter-width / 2);
+    margin-right: -($grid-gutter-width / 2);
   }
 }
 
@@ -662,7 +668,7 @@
 /* page ----------------------------------------------------------- */
 
 .tobago-page {
-  padding-top: 1rem;
+  padding-top: $page-padding-top;
   padding-bottom: 1rem;
 }
 
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-header-footer.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-header-footer.ts
index 94c2ac7..4ec0c53 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-header-footer.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-header-footer.ts
@@ -27,53 +27,32 @@
     const body = DomUtils.selfOrQuerySelectorAll(element, "body")[0];
 
     if (body) {
-      const headers = DomUtils.selfOrQuerySelectorAll(element, ".fixed-top");
       const footers = DomUtils.selfOrQuerySelectorAll(element, ".fixed-bottom");
 
-      HeaderFooter.setMargins(body, headers, footers);
+      HeaderFooter.setMargins(body, footers);
 
-      let lastMaxHeaderHeight = 0;
       let lastMaxFooterHeight = 0;
 
       // todo: check possible memory leak: use of DOM elements in event listener!
       window.addEventListener("resize", function (): void {
-        const maxHeaderHeight: number = HeaderFooter.getMaxHeaderHeight(headers);
         const maxFooterHeight: number = HeaderFooter.getMaxFooterHeight(footers);
 
-        if (maxHeaderHeight !== lastMaxHeaderHeight
-            || maxFooterHeight !== lastMaxFooterHeight) {
-          HeaderFooter.setMargins(body, headers, footers);
-
-          lastMaxHeaderHeight = maxHeaderHeight;
+        if (maxFooterHeight !== lastMaxFooterHeight) {
+          HeaderFooter.setMargins(body, footers);
           lastMaxFooterHeight = maxFooterHeight;
         }
       });
     }
   };
 
-  static setMargins =  function (body: HTMLElement, headers: HTMLElement[], footers: HTMLElement[]): void {
-    const maxHeaderHeight = HeaderFooter.getMaxHeaderHeight(headers);
+  static setMargins =  function (body: HTMLElement, footers: HTMLElement[]): void {
     const maxFooterHeight = HeaderFooter.getMaxFooterHeight(footers);
 
-    if (maxHeaderHeight > 0) {
-      body.style.marginTop = maxHeaderHeight + "px";
-    }
     if (maxFooterHeight > 0) {
       body.style.marginBottom = maxFooterHeight + "px";
     }
   };
 
-  static getMaxHeaderHeight = function (headers: HTMLElement[]): number {
-    let maxHeaderHeight = 0;
-    headers.forEach(function (element: HTMLElement): void {
-      const height = DomUtils.outerHeightWithMargin(element);
-      if (height > maxHeaderHeight) {
-        maxHeaderHeight = height;
-      }
-    });
-    return maxHeaderHeight;
-  };
-
   static getMaxFooterHeight = function (footers: HTMLElement[]): number {
     let maxFooterHeight = 0;
     footers.forEach(function (element: HTMLElement): void {