fix(menu): submenus overflow (#692)

fix(menu): submenus alignments
hbstack · Oct 8, 2024 · 9ac3464 · 9ac3464
1 parent beb9b58
commit 9ac3464
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/assets/hb/modules/header/scss/_header.scss b/assets/hb/modules/header/scss/_header.scss
@@ -86,18 +86,27 @@ $hb-header-logo-bg: null !default;
 
 @include media-breakpoint-up($hb-header-breakpoint) {
     .hb-header-submenus {
-        &[data-columns="2"] {
-          column-count: 2;
+        &.show {
+          display: grid;
+          max-height: 80vh;
+          overflow: auto;
+        }
 
-          .hb-header-submenu {
-            max-width: 35vw;
-            overflow: hidden;
-          }
+        @for $cols from 2 through 2 {
+            &[data-columns="#{$cols}"] {
+                grid-template-columns: repeat($cols, 1fr);
+
+                .hb-header-submenu {
+                    .dropdown-item-desc {
+                        max-width: calc(70vw / $cols);
+                        overflow: hidden;
+                    }
+                }
+              }
         }
     }
 }
 
-
 @include media-breakpoint-down($hb-header-breakpoint) {
     .dropdown-header {
         text-wrap: wrap;

diff --git a/layouts/partials/hb/modules/header/submenu.html b/layouts/partials/hb/modules/header/submenu.html
@@ -22,7 +22,7 @@
     <hr class="dropdown-divider" />
   {{- else }}
     <a
-      class="hb-header-submenu dropdown-item d-flex align-items-center{{ cond $active ` active` `` }}"
+      class="hb-header-submenu dropdown-item d-flex h-100{{ cond $active ` active` `` }}"
       href="{{ $url }}"
       {{ with $target }}target="{{ . }}"{{ end }}
       {{ with $rel }}rel="{{ . }}"{{ end }}>
@@ -39,7 +39,7 @@
           {{- $menu.Name -}}
         </div>
         {{- with $description }}
-          <p class="dropdown-item-desc mb-0 text-wrap">{{- . -}}</p>
+          <p class="dropdown-item-desc mb-0 text-truncate">{{- . -}}</p>
         {{- end }}
       </div>
       {{- $menu.Post -}}