diff --git a/assets/hb/modules/header/js/index.ts b/assets/hb/modules/header/js/index.ts
index 05a72864..f995802d 100644
--- a/assets/hb/modules/header/js/index.ts
+++ b/assets/hb/modules/header/js/index.ts
@@ -4,26 +4,27 @@ import "js/bootstrap/src/offcanvas";
 (() => {
     document.addEventListener('DOMContentLoaded', () => {
         const header = document.querySelector('.hb-header') as HTMLElement
+        const nav = header.querySelector('.hb-header-nav') as HTMLElement
         if (!header) {
             return;
         }
 
         const shadow = () => {
-            header.classList.add('shadow-sm')
+            nav.classList.add('shadow-sm')
         }
 
         const removeShadow = () => {
-            header.classList.contains('shadow-sm') && header.classList.remove('shadow-sm')
+            nav.classList.contains('shadow-sm') && nav.classList.remove('shadow-sm')
         }
 
         const show = () => {
-            header.style.removeProperty('opacity');
-            header.style.removeProperty('z-index');
+            nav.style.removeProperty('opacity');
+            nav.style.removeProperty('z-index');
         }
 
         const hide = () => {
-            header.style.opacity = '0';
-            header.style.zIndex = '0';
+            nav.style.opacity = '0';
+            nav.style.zIndex = '0';
         }
 
         let h = 0;
diff --git a/assets/hb/modules/header/scss/_header.scss b/assets/hb/modules/header/scss/_header.scss
index aee429a0..6afaac0b 100644
--- a/assets/hb/modules/header/scss/_header.scss
+++ b/assets/hb/modules/header/scss/_header.scss
@@ -2,7 +2,7 @@ $hb-header-sticky: true !default;
 $hb-scroll-padding-top: 68px !default;
 $hb-header-menus-alignment: "center" !default;
 $hb-header-logo-bg: null !default;
-$hb-header-margin-bottom: 2rem;
+$hb-header-margin-bottom: if($hb-header-sticky, 6rem, 2rem);
 
 :root {
     --#{$prefix}header-navbar-active-color: var(--#{$prefix}primary);
@@ -20,11 +20,6 @@ $hb-header-margin-bottom: 2rem;
 
 .hb-header {
     margin-bottom: $hb-header-margin-bottom;
-    transition: opacity 0.2s ease-in, box-shadow 1s;
-
-    @if $hb-header-sticky {
-        @extend .sticky-top;
-    }
 
     .dropdown-item {
         --#{$prefix}dropdown-item-padding-x: 0.5rem;
@@ -43,6 +38,14 @@ $hb-header-margin-bottom: 2rem;
     }
 }
 
+.hb-header-nav {
+    transition: 1s;
+
+    @if $hb-header-sticky {
+        @extend .fixed-top;
+    }
+}
+
 .hb-header-menus {
     @if $hb-header-menus-alignment == "center" {
         margin: auto;
diff --git a/layouts/partials/hb/modules/header/index.html b/layouts/partials/hb/modules/header/index.html
index 1898f92d..ffc2fac5 100644
--- a/layouts/partials/hb/modules/header/index.html
+++ b/layouts/partials/hb/modules/header/index.html
@@ -1,5 +1,7 @@
 {{- $params := $.Site.Params.hb.header }}
-<header class="hb-header">
+<header class="hb-header"
+  {{ partial "hugopress/functions/render-attributes" (dict "Name" "hb-header" "Page" .) | safeHTMLAttr }}>
+  {{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-header-begin" "Page" .) }}
   <nav class="hb-header-nav navbar navbar-expand-xxl">
     <div
       class="{{ cond $params.full_width `container-fluid` `container-xxl` }}">
@@ -57,4 +59,5 @@ <h5 class="offcanvas-title" id="hb-header-content-label">
       </div>
     </div>
   </nav>
+  {{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-header-end" "Page" .) }}
 </header>