[BUGFIX] language menu in main-nav alignment when using dropdownColum…

…ns (#516)
t3kit · Apr 16, 2019 · f28b2cd · f28b2cd
1 parent ac34c19
commit f28b2cd
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 14 deletions.
diff --git a/Resources/Public/css/main.css b/Resources/Public/css/main.css
diff --git a/Resources/Public/less/main.less b/Resources/Public/less/main.less
@@ -2435,19 +2435,27 @@
     list-style-type: none;
     padding: 0;
     position: absolute;
-    width: 100%;
-    right: 0;
-    left: auto;
     top: 0;
     background: @header-top-bg-color;
-    // background-color: @header-info-background;
+    left: 0;
+    right: 0;
     z-index: 4000;
     text-align: right;
     padding-right: 50px;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s 0s, visibility 0s 0.3s;
     border-bottom: 1px solid @border-color;
+
+    @media (min-width: @screen-md-min) {
+        left: calc(~"(100% - 970px) / 2");
+        right: calc(~"(100% - 970px) / 2");
+    }
+
+    @media (min-width: @screen-lg-min) {
+        left: calc(~"(100% - 1170px) / 2");
+        right: calc(~"(100% - 1170px) / 2");
+    }
 }
 
 .header-top__language-menu-box-close-btn:after,
@@ -2690,7 +2698,6 @@
 }
 
 .main-navigation .header-top__language-menu-box {
-    width: 100%;
     height: 100%;
     background-color: @nav-background-color;
 }

diff --git a/felayout_t3kit/dev/styles/main/header/header.less b/felayout_t3kit/dev/styles/main/header/header.less
@@ -137,19 +137,27 @@
     list-style-type: none;
     padding: 0;
     position: absolute;
-    width: 100%;
-    right: 0;
-    left: auto;
     top: 0;
     background: @header-top-bg-color;
-    // background-color: @header-info-background;
+    left: 0;
+    right: 0;
     z-index: 4000;
     text-align: right;
     padding-right: 50px;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s 0s, visibility 0s 0.3s;
     border-bottom: 1px solid @border-color;
+
+    @media (min-width: @screen-md-min) {
+        left: calc(~"(100% - 970px) / 2");
+        right: calc(~"(100% - 970px) / 2");
+    }
+
+    @media (min-width: @screen-lg-min) {
+        left: calc(~"(100% - 1170px) / 2");
+        right: calc(~"(100% - 1170px) / 2");
+    }
 }
 
 .header-top__language-menu-box-close-btn:after,
@@ -392,7 +400,6 @@
 }
 
 .main-navigation .header-top__language-menu-box {
-    width: 100%;
     height: 100%;
     background-color: @nav-background-color;
 }