From eff25529c1bfd2cdd07479044c52d1dccf4c674f Mon Sep 17 00:00:00 2001 From: pxamike Date: Tue, 16 Apr 2019 16:43:34 +0200 Subject: [PATCH] [BUGFIX] - search-button in main-navigation is hidden under search-box when language-menu-box is enabled. (#508) - search-box in header-middle doesn't fit when social-icons are enabled. --- Resources/Public/css/main.css | 25 +++++++----- Resources/Public/less/main.less | 38 ++++++++++--------- .../main/contentElements/socialIcons.less | 2 +- .../dev/styles/main/header/header.less | 36 ++++++++++-------- 4 files changed, 57 insertions(+), 44 deletions(-) diff --git a/Resources/Public/css/main.css b/Resources/Public/css/main.css index f771c308..7135364b 100644 --- a/Resources/Public/css/main.css +++ b/Resources/Public/css/main.css @@ -400,7 +400,7 @@ @media (min-width: 768px) { .header-middle__logo { float: left; - width: 40%; + width: auto; text-align: left; } .header-middle__logo-link { @@ -871,6 +871,16 @@ display: none; } } +.header-top-wrp .tx-solr-searchbox, +.main-navigation .tx-solr-searchbox { + position: relative; + float: right; +} +@media (max-width: 991px) { + .header-top-wrp .tx-solr-searchbox { + position: initial; + } +} .main-navigation__search-btn-wrp { display: none; float: right; @@ -1040,15 +1050,15 @@ .main-navigation__search-box { position: relative; height: 60px; - width: 100%; - top: 0; + width: 100vw; + bottom: 0; left: auto; right: 0; z-index: 3000; } @media (min-width: 992px) { .main-navigation__search-box { - width: 46%; + width: 450px; position: absolute; right: 60px; opacity: 0; @@ -1056,11 +1066,6 @@ transition: opacity 0.3s 0s, visibility 0s 0.3s; } } -@media (min-width: 1200px) { - .main-navigation__search-box { - width: 36%; - } -} .main-navigation__search-box._search-box-visible { opacity: 1; visibility: visible; @@ -4150,7 +4155,7 @@ div.awesomplete li[aria-selected="true"] mark { @media (min-width: 768px) { .header-middle__social-icon .social-icons { float: right; - width: 60%; + width: auto; text-align: right; padding: 0 10px 0 0; height: 110px; diff --git a/Resources/Public/less/main.less b/Resources/Public/less/main.less index 3c633e44..fe2d0d15 100644 --- 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 index 361854cf..e4eabdea 100644 --- 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 index 46885f4c..5e89f24d 100644 --- 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;