menu header li width variable

web/themes/custom/eql/css-compiled/styles.css

@@ -1983,28 +1983,27 @@ a {
       align-self: baseline;
       width: 70%; }
     #header-top .region-header-top-left ul {
-      background-color: white;
       font-size: 1rem;
       list-style: none;
       display: flex;
       flex-direction: row;
       justify-content: space-around;
       width: 100%;
-      padding: 0.5rem; }
+      padding: 1rem; }
       #header-top .region-header-top-left ul .is-active {
         color: #009ee3; }
       #header-top .region-header-top-left ul ul {
         display: flex;
-        flex-direction: column;
-        padding: 0.5rem; }
+        flex-direction: column; }
         #header-top .region-header-top-left ul ul .is-active {
           color: #009ee3; }
       #header-top .region-header-top-left ul li {
         display: flex;
         flex-direction: column;
-        padding: 0.5rem;
+        background-color: white;
+        padding-bottom: 0.8rem;
         align-items: center;
-        min-width: 260px; }
+        min-width: 25%; }
         #header-top .region-header-top-left ul li a {
           color: black;
           text-align: center; }
@@ -2016,7 +2015,6 @@ a {
       display: none; }
     #header-top .region-header-top-left :hover ul ul {
       display: flex;
-      background-color: white;
       justify-content: space-around; }
       #header-top .region-header-top-left :hover ul ul .is-active {
         color: #009ee3; }

web/themes/custom/eql/scss/partials/_header.scss

@@ -73,14 +73,13 @@
         }
 
         ul{
-            background-color: $white;
             font-size: 1rem;
             list-style: none;
             display: flex;
             flex-direction: row;
             justify-content: space-around;
             width: 100%;
-            padding: 0.5rem;
+            padding: 1rem;
            
             .is-active{
                 color:$blue-light;
@@ -89,7 +88,7 @@
                 display: flex;
                 flex-direction: column;
                 // padding: 1rem;
-                padding: 0.5rem;
+                // padding: 0.5rem;
                 .is-active{
                     color:$blue-light;
                 }
@@ -97,9 +96,10 @@
             li{
                 display: flex;
                 flex-direction: column;
-                padding: 0.5rem;
+                background-color: $white;
+                padding-bottom: 0.8rem;
                 align-items: center;
-                min-width: 260px;
+                min-width: 25%;
                 a {
                     color: $black;
                     text-align: center;
@@ -121,7 +121,6 @@
         :hover ul{
             ul{
                 display: flex;
-                background-color: $white;
                 justify-content: space-around;
                 // padding: 0.5rem;
                 .is-active{