Expand mobile navigation to whole viewport

canonical · Jul 2, 2024 · 20a5d7e · 20a5d7e
1 parent b4b7c5b
commit 20a5d7e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/scss/_patterns_navigation.scss b/scss/_patterns_navigation.scss
@@ -791,10 +791,14 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
   .p-navigation--reduced.has-menu-open {
     height: 100vh;
     overflow-y: hidden;
+    position: fixed;
+    width: 100vw;
 
     @media (min-width: $breakpoint-navigation-threshold) {
       height: auto;
       overflow-y: visible;
+      position: static;
+      width: auto;
     }
 
     .p-navigation__banner .p-navigation__items {

diff --git a/templates/docs/examples/patterns/navigation/reduced.html b/templates/docs/examples/patterns/navigation/reduced.html
@@ -186,9 +186,16 @@ <h1>Ubuntu for desktops</h1>
     </div>
   </section>
 </main>
+{% endblock %}
 
-<script>
-  {% include 'docs/examples/patterns/navigation/_script-sliding.js' %}
-</script>
+{% block script %}
+  <script>
+      {% include 'docs/examples/patterns/navigation/_script-sliding.js' %}
+  </script>
+{% endblock %}
 
-{% endblock %}
+{% block style %}
+  <style>
+    body { margin: 0; }
+  </style>
+{% endblock %}