[BUGFIX] - search-button in main-navigation is hidden under search-bo…

…x when language-menu-box is enabled. (#508) - search-box in header-middle doesn't fit when social-icons are enabled.
t3kit · Apr 16, 2019 · eff2552 · eff2552
1 parent 29a26e5
commit eff2552
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 44 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
@@ -2654,7 +2654,7 @@
 @media (min-width: @screen-sm-min) {
     .header-middle__logo {
         float: left;
-        width: 40%;
+        width: auto;
         text-align: left;
     }
 
@@ -3204,6 +3204,21 @@
 // =================================
 // Search
 
+// .tx-solr-searchbox contains .main-navigation__search-btn and .main-navigation__search-box
+// by setting it to relative position, the search-field can now float (responsive)
+.header-top-wrp .tx-solr-searchbox,
+.main-navigation .tx-solr-searchbox {
+    position: relative;
+    float: right;
+}
+
+@media (max-width: @screen-sm-max) {
+    // removes relative position to make header-top searchbox full width
+    .header-top-wrp .tx-solr-searchbox {
+        position: initial;
+    }
+}
+
 .main-navigation__search-btn-wrp {
     display: none;
     float: right;
@@ -3404,22 +3419,17 @@
 .main-navigation__search-box {
     position: relative;
     height: @nav-height;
-    width: 100%;
-    top: 0;
+    width: 100vw;
+    bottom: 0;
     left: auto;
     right: 0;
     z-index: 3000;
 }
 
-@media (min-width: @screen-sm-min) {
-    .main-navigation__search-box {
-        // width: 50%;
-    }
-}
-
 @media (min-width: @screen-md-min) {
+    // search-box in both header-top and main-navigation
     .main-navigation__search-box {
-        width: 46%;
+        width: 450px;
         position: absolute;
         right: 60px;
         opacity: 0;
@@ -3428,12 +3438,6 @@
     }
 }
 
-@media (min-width: @screen-lg-min) {
-    .main-navigation__search-box {
-        width: 36%;
-    }
-}
-
 .main-navigation__search-box._search-box-visible {
     opacity: 1;
     visibility: visible;
@@ -7196,7 +7200,7 @@ div.awesomplete li[aria-selected="true"] mark {
 @media (min-width: @screen-sm-min) {
     .header-middle__social-icon .social-icons {
         float: right;
-        width: 60%;
+        width: auto;
         text-align: right;
         padding: 0 10px 0 0;
         height: @header-middle-height;

diff --git a/felayout_t3kit/dev/styles/main/contentElements/socialIcons.less b/felayout_t3kit/dev/styles/main/contentElements/socialIcons.less
@@ -78,7 +78,7 @@
 @media (min-width: @screen-sm-min) {
     .header-middle__social-icon .social-icons {
         float: right;
-        width: 60%;
+        width: auto;
         text-align: right;
         padding: 0 10px 0 0;
         height: @header-middle-height;

diff --git a/felayout_t3kit/dev/styles/main/header/header.less b/felayout_t3kit/dev/styles/main/header/header.less
@@ -356,7 +356,7 @@
 @media (min-width: @screen-sm-min) {
     .header-middle__logo {
         float: left;
-        width: 40%;
+        width: auto;
         text-align: left;
     }
 
@@ -906,6 +906,21 @@
 // =================================
 // Search
 
+// .tx-solr-searchbox contains .main-navigation__search-btn and .main-navigation__search-box
+// by setting it to relative position, the search-field can now float (responsive)
+.header-top-wrp .tx-solr-searchbox,
+.main-navigation .tx-solr-searchbox {
+    position: relative;
+    float: right;
+}
+
+@media (max-width: @screen-sm-max) {
+    // removes relative position to make header-top searchbox full width
+    .header-top-wrp .tx-solr-searchbox {
+        position: initial;
+    }
+}
+
 .main-navigation__search-btn-wrp {
     display: none;
     float: right;
@@ -1106,22 +1121,17 @@
 .main-navigation__search-box {
     position: relative;
     height: @nav-height;
-    width: 100%;
-    top: 0;
+    width: 100vw;
+    bottom: 0;
     left: auto;
     right: 0;
     z-index: 3000;
 }
 
-@media (min-width: @screen-sm-min) {
-    .main-navigation__search-box {
-        // width: 50%;
-    }
-}
-
 @media (min-width: @screen-md-min) {
+    // search-box in both header-top and main-navigation
     .main-navigation__search-box {
-        width: 46%;
+        width: 450px;
         position: absolute;
         right: 60px;
         opacity: 0;
@@ -1130,12 +1140,6 @@
     }
 }
 
-@media (min-width: @screen-lg-min) {
-    .main-navigation__search-box {
-        width: 36%;
-    }
-}
-
 .main-navigation__search-box._search-box-visible {
     opacity: 1;
     visibility: visible;