fix menu css for large menus

ot_templating/Resources/Public/assets/style/common/module/menu.scss

@@ -2,10 +2,11 @@
 #menu {
   @include flex;
   flex-direction: row;
+  flex-wrap: wrap;
   list-style: none;
 
   background-color: $primary-color;
-  height: 50px;
+  //min-height: 50px;
   padding: 0;
   align-items: center;
 }
@@ -15,13 +16,17 @@
 }
 
 #menu li a {
-  color: $text-color-on-primary;
-  font-weight: $text-weight-on-primary;
-  height: 100%;
   display: flex;
+  flex-direction: row;
   align-items: center;
-  padding-left: 0.8em;
-  padding-right: 0.8em;
+
+  height: 100%;
+  min-height: 26px;
+  padding: 12px;
+
+  color: $text-color-on-primary;
+  font-weight: $text-weight-on-primary;
+  text-align: center;
 }
 
 #menu li:hover {
@@ -50,7 +55,6 @@
 
 #menu .dropdown-menu a {
   color: #262626;
-  padding: 0.8em;
 }
 
 #menu .dropside-menu {

ot_templating/Resources/Public/assets/style/theme-green.css

@@ -129,9 +129,9 @@ ul.dropdown-left {
   /* NEW, Spec - Opera 12.1, Firefox 20+ */
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   list-style: none;
   background-color: #228d00;
-  height: 50px;
   padding: 0;
   align-items: center;
 }
@@ -141,13 +141,15 @@ ul.dropdown-left {
 }
 
 #menu li a {
-  color: #341109;
-  font-weight: 600;
-  height: 100%;
   display: flex;
+  flex-direction: row;
   align-items: center;
-  padding-left: 0.8em;
-  padding-right: 0.8em;
+  height: 100%;
+  min-height: 26px;
+  padding: 12px;
+  color: #341109;
+  font-weight: 600;
+  text-align: center;
 }
 
 #menu li:hover {
@@ -176,7 +178,6 @@ ul.dropdown-left {
 
 #menu .dropdown-menu a {
   color: #262626;
-  padding: 0.8em;
 }
 
 #menu .dropside-menu {