Set modal button position to be absolute while relative to parent rather than the page. This prevents the button from scrolling down with the page since the header was unstuck. Also correct white space issues on welcome page.

src/iss-components/site-header/menu-modal/menu-modal.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="menu-modal-container">
-        <button class="menu-button" type="button" :class="[isActive ? 'active' : '']" data-bs-toggle="modal" data-bs-target="#footerModal" aria-label="Hamburger Menu (modal window)">
+        <button class="menu-button" type="button" :class="[isActive ? 'active' : '']" aria-label="Hamburger Menu (modal window)" @click="toggle()">
             <div class="bar1"></div>
             <div class="bar2"></div>
             <div class="bar3"></div>
         </button>
     </div>
     <!-- Modal -->
-    <div class="modal menu-modal fade" data-bs-backdrop="false" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" v-on="{ 'show.bs.modal' : show, 'hide.bs.modal' : hide }">
+    <div class="modal menu-modal fade" data-bs-backdrop="false" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-fullscreen">
         <div class="modal-content">
             <div class="modal-header visually-hidden">
@@ -53,6 +53,8 @@
 
 <script>
 import textLink from "@/ux-components/text-link/text-link";
+import { Modal } from "bootstrap";
+
 export default {
     name: 'menuModal',
     data() {
@@ -62,17 +64,25 @@ export default {
         };
     },
     methods: {
-        show() {
-            this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 56;
-            this.isActive = true;
-            document.querySelector('.fade-on-route-transition').scrollTo({
-                top: 0,  behavior: 'instant'
-            });
-        },
-        hide() {
-            var self = this;
-            self.isActive = false;
-        },
+        toggle() {
+            if(this.isActive){
+                //hide modal
+                this.isActive = false;
+                const modal = Modal.getInstance(document.getElementById("footerModal"));
+                modal?.hide();
+            }
+            else
+            {
+                //show modal
+                this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 56;
+                this.isActive = true;
+                const modal = Modal.getOrCreateInstance(document.getElementById("footerModal"));
+                modal?.show();
+                document.querySelector('.fade-on-route-transition').scrollTo({
+                    top: 0,  behavior: 'instant'
+                });
+            }
+        }
     },
     components: {
         textLink,
@@ -127,6 +137,7 @@ export default {
         border-top: 1px solid $gray-300;
         overflow-x: visible;
         overflow-y: visible;
+        z-index: 2;
         .modal-body {
             padding: 2rem;
             .ccpa-icon {

src/iss-components/site-header/site-header.vue

@@ -96,6 +96,7 @@ export default({
     <style lang="scss" scoped>
     .site-header {
         height: 56px;
+        position: relative;
     }
     .alert {
         left: 0;

src/layouts/welcome-page/welcome-page.vue

@@ -2,7 +2,7 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
         <div class="page-container-grouped-styles welcome">
             <div class="fade-on-route-transition position-relative">
-                <siteHeader cmsWidgetName="SiteHeaderWidget" class="mt-5"/>
+                <siteHeader cmsWidgetName="SiteHeaderWidget"/>
                 <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-4"/>
                 <div class="container-fluid px-5">
                     <div class="row mt-5">