fixed mobile nav non-reachable newsletter button issue

MozillaFoundation · May 7, 2024 · 8cdb6ef · 8cdb6ef
1 parent 93bd590
commit 8cdb6ef
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/network-api/networkapi/templates/fragments/primary_nav.html b/network-api/networkapi/templates/fragments/primary_nav.html
@@ -6,7 +6,7 @@
 <div class="wrapper-burger {% block wrapper_classes %}{% endblock %}">
     <div class="menu-container xlarge:tw-h-40 tw-py-8 small:tw-pl-0 medium:tw-py-10 xlarge:tw-py-0 {% block menu_container_classes %}{% endblock %}">
         {% block menu_content %}
-            <div class="narrow-screen-menu tw-top-[61px] medium:tw-top-[69px] tw-bg-white hidden xlarge:tw-hidden tw-overflow-y-auto">
+            <div class="narrow-screen-menu tw-bg-white hidden xlarge:tw-hidden tw-overflow-y-auto">
                 {% block narrow_screen_menu %}
                     <div class="narrow-screen-menu-background tw-dark">
                         <div class="narrow-screen-menu-container ">

diff --git a/network-api/networkapi/templates/pages/base.html b/network-api/networkapi/templates/pages/base.html
@@ -86,7 +86,7 @@
             <base target="_blank">
         {% endif %}
     </head>
-    <body class="{% block bodyclass %}{% endblock %}" id="view-{% block body_id %}{% endblock %}">
+    <body class="{% block bodyclass %}{% endblock %} {% if settings.nav.SiteNavMenu.active_nav_menu %}new-nav-enabled{% endif %}" id="view-{% block body_id %}{% endblock %}">
         {% if user.is_authenticated %}
             {% wagtailuserbar 'bottom-left' %}
         {% endif %}

diff --git a/source/sass/components/primary-nav.scss b/source/sass/components/primary-nav.scss
@@ -236,7 +236,6 @@
       left: 0;
       right: 0;
       overflow-y: auto;
-      height: 100vh;
       transition:
         opacity 0.2s,
         height 0.5s;
@@ -253,6 +252,20 @@
         }
       }
 
+      .new-nav-enabled & {
+        top: 61px;
+        height: calc(100vh - 61px);
+
+        @media screen and (min-width: $bp-md) {
+          top: 69px;
+          height: calc(100vh - 69px);
+        }
+
+        &.hidden {
+          height: 0;
+        }
+      }
+
       .narrow-screen-menu-container {
         padding: 0 52px;
       }