No wrap for mega menu text in mobile view on expand/collapse

TAMULib · Sep 24, 2020 · 548d6ab · 548d6ab
1 parent 160efc7
commit 548d6ab
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/src/app/tl-header/tl-header.component.scss b/src/app/tl-header/tl-header.component.scss
@@ -271,28 +271,29 @@
             font-weight: 600;
             font-size: 16px;
             color: black;
+            white-space: nowrap;
           }
         }
       }
 
       wvr-nav-list-element[top-navigation-mobile] {
-        
+
         .dropdown,
         wvr-nav-li-element,
         wvr-nav-li {
           flex: 1 1 auto;
           border-right: none;
         }
-        
+
         ul {
           justify-content: space-evenly;
           flex-wrap: nowrap!important;
           flex-direction: column!important;
         }
-        
+
         li {
           justify-content: left!important;
-          
+
           wvr-dropdown-element,
           wvr-dropdown {
             width: 100%;
@@ -301,7 +302,7 @@
           .wvr-dropdown {
             display: flex !important;
           }
-          
+
 
           wvr-button-element {
             display: flex;
@@ -353,32 +354,38 @@
               wvr-button-element {
                 display: flex;
                 width: 100%;
+                white-space: nowrap;
                 button-wrapper {
                   display: flex;
                   width: 100%;
                   height: 68px;
                   align-items: center;
                   border-bottom: thin solid rgb(175, 175, 175);
+                  white-space: nowrap;
                   button {
                     display: flex;
                     width: 100%;
+                    white-space: nowrap;
+                    wvr-dropdown-btn {
+                      white-space: nowrap;
+                    }
                   }
                 }
               }
             }
           }
         }
       }
-  
+
       .mobile-menu-button {
         display: inline-block;
         overflow: hidden;
       }
-  
+
       .mobile-menu {
         display: inline-block;
       }
-  
+
       .mobile-menu.closed {
         width: 0px;
         opacity: 0;
@@ -403,6 +410,8 @@
     left: 0;
     z-index: 1100;
     transition: width 0.5s ease-in-out, opacity 0.5s ease-in-out;
+
   }
 
+
 }
diff --git a/src/app/tl-mega-menu/tl-mega-menu-section/tl-mega-menu-section.component.scss b/src/app/tl-mega-menu/tl-mega-menu-section/tl-mega-menu-section.component.scss
@@ -10,8 +10,9 @@
     font-size: var(--tl-h3-font-size);
     font-weight: 100;
     border-bottom: 2px solid var(--tl-primary);
-    text-shadow: 
-        -0.25px 0 var(--tl-primary), 0 0.25px var(--tl-primary), 0.25px 0 var(--tl-primary), 0 -0.25px var(--tl-primary), 
+    white-space: nowrap;
+    text-shadow:
+        -0.25px 0 var(--tl-primary), 0 0.25px var(--tl-primary), 0.25px 0 var(--tl-primary), 0 -0.25px var(--tl-primary),
         -0.25px -0.25px var(--tl-primary), 0.25px 0.25px var(--tl-primary), -0.25px 0.25px var(--tl-primary), 0.25px -0.25px var(--tl-primary);
   }
   p {
@@ -21,6 +22,7 @@
     ::ng-deep {
       tl-nav-li {
         width: 100%;
+        white-space: nowrap;
         a {
           padding: 4px 0px 4px 25px;
           color: var(--tl-deep-grey);