Add overflow wrap to #multipage-nav secondary nav elements (#12559)

* Update secondary navigation overflow behavior to wrap
MozillaFoundation · Jul 15, 2024 · 91581e7 · 91581e7
1 parent b3ca639
commit 91581e7
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/bannered_campaign_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/bannered_campaign_page.html
@@ -19,7 +19,7 @@
  <div id="multipage-horizontal-nav-wrapper" class="d-none d-md-block full-width">
  <div class="container">
  <div class="row">
- <div class="col-12">
+ <div class="col-12 tw-flex tw-items-end tw-space-x-2">
  {% mini_site_horizontal_nav page %}
  </div>
  </div>

diff --git a/source/sass/components/multipage-nav.scss b/source/sass/components/multipage-nav.scss
@@ -10,13 +10,13 @@
  }
  }
 }
-
 #multipage-nav {
  &:not(.vertical-nav):not(.pni-category-nav) {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border-bottom: 1px $gray-20 solid;
+ flex-wrap: wrap;
 
  @at-root #multipage-horizontal-nav-wrapper.full-width #{&} {
  border: none;
@@ -27,6 +27,7 @@
  align-items: center;
  margin-right: 2rem;
  padding-bottom: 16px;
+ padding-top: 16px;
  }
  }