Complete questionnaire builder

src/components/PageNav/index.svelte

@@ -12,12 +12,36 @@
     Array.isArray(navItems) && navItems.length > 4 ? "bring-down" : "";
 </script>
 
+<div
+  class="header flex items-center justify-between {!disableSticky &&
+    'sticky'} {dynamicRootClass}"
+  style={overidableStyle}
+>
+  {#if !!title}
+    <h4 class="title">{title}</h4>
+  {/if}
+  {#if Array.isArray(navItems) && navItems.length}
+    <div class="flex justify-evenly items-center">
+      {#each navItems as item}
+        <a class="mr-5 text-sm {item.isActive && 'active'}" href={item.href}>
+          {item.label}
+        </a>
+      {/each}
+      {#if addButtonHref}
+        <NewButton href={addButtonHref} label={addButtonLabel} />
+      {/if}
+    </div>
+  {/if}
+  <slot name="widget" />
+</div>
+
 <style>
   .header {
     border-bottom: 1px solid var(--border-color);
     padding: 15px;
     min-height: 61px;
     background-color: #fff;
+    z-index: 1;
   }
 
   .header.sticky {
@@ -66,24 +90,3 @@
     }
   }
 </style>
-
-<div
-  class="header flex items-center justify-between mb-2 {!disableSticky && 'sticky'} {dynamicRootClass}"
-  style={overidableStyle}>
-  {#if !!title}
-    <h4 class="title">{title}</h4>
-  {/if}
-  {#if Array.isArray(navItems) && navItems.length}
-    <div class="flex justify-evenly items-center">
-      {#each navItems as item}
-        <a class="mr-5 text-sm {item.isActive && 'active'}" href={item.href}>
-          {item.label}
-        </a>
-      {/each}
-      {#if addButtonHref}
-        <NewButton href={addButtonHref} label={addButtonLabel} />
-      {/if}
-    </div>
-  {/if}
-  <slot name="widget" />
-</div>