diff --git a/Resources/Public/css/main.css b/Resources/Public/css/main.css index 55e57982..236f186c 100644 --- a/Resources/Public/css/main.css +++ b/Resources/Public/css/main.css @@ -419,21 +419,35 @@ background: #fff; top: 1px; } -.main-navigation .header-top__language-menu-box-close-btn { - top: 5px; -} .main-navigation .header-top__language-menu-btn { line-height: 60px; } +.main-navigation .header-top__language-menu-box-close-btn { + height: 60px; +} +@media (min-width: 992px) { + .main-navigation .header-top__language-menu-btn { + line-height: 60px; + } + .main-navigation .header-top__language-menu-box-close-btn { + height: 60px; + } +} .main-navigation .header-top__language-menu-box { width: 100%; height: 100%; background-color: #2b2b2b; + border-bottom-width: 0; } .main-navigation .header-top__language-menu-box .header-top__language-menu-box-item { color: #fff; line-height: 60px; } +@media (min-width: 992px) { + .main-navigation .header-top__language-menu-box .header-top__language-menu-box-item { + line-height: 60px; + } +} .main-navigation .header-top__language-menu { display: none; } @@ -473,6 +487,7 @@ opacity: 0; visibility: hidden; transition: opacity 0.3s 0s, visibility 0s 0.3s; + height: 60px; } .main-navigation__search-box._header-top-search-btn._search-box-visible { opacity: 1; @@ -715,6 +730,7 @@ } .main-navigation__item-link { border: none; + line-height: 60px; } .main-navigation__open-sub-menu-link { display: none; @@ -896,6 +912,11 @@ margin: 0 auto; -webkit-tap-highlight-color: rgba(120, 120, 120, 0.3); } +@media (min-width: 992px) { + .main-navigation__search-btn { + height: 60px; + } +} .main-navigation__search-btn:after, .main-navigation__search-btn:before { content: ''; @@ -1042,6 +1063,7 @@ opacity: 0; visibility: hidden; transition: opacity 0.3s 0s, visibility 0s 0.3s; + height: 60px; } } @media (min-width: 1200px) { @@ -5354,7 +5376,7 @@ div.awesomplete li[aria-selected="true"] mark { ._dropdown-menu-with-columns .main-navigation__item._sub.open > .main-navigation__item-link:before { content: ''; position: absolute; - top: 52px; + bottom: 0; left: 50%; margin-left: -8px; width: 0; @@ -5381,7 +5403,7 @@ div.awesomplete li[aria-selected="true"] mark { .touch ._dropdown-menu-with-columns .main-navigation__item._sub._open-tablet-dropdown > .main-navigation__item-link:before { content: ''; position: absolute; - top: 52px; + bottom: 0; left: 50%; margin-left: -8px; width: 0; diff --git a/Resources/Public/less/bootstrap.less b/Resources/Public/less/bootstrap.less index f0f8a714..d350b126 100644 --- a/Resources/Public/less/bootstrap.less +++ b/Resources/Public/less/bootstrap.less @@ -907,6 +907,7 @@ // Navigation @nav-height: 60px; +@nav-height-md: @nav-height; // change to have unique nav-height in desktop @nav-link-color: #fff; @nav-link-hover-color: @nav-link-color; @nav-link-active-color: @main-color; diff --git a/Resources/Public/less/main.less b/Resources/Public/less/main.less index fcade3d1..ff62415d 100644 --- a/Resources/Public/less/main.less +++ b/Resources/Public/less/main.less @@ -2067,6 +2067,7 @@ // Navigation @nav-height: 60px; +@nav-height-md: @nav-height; // change to have unique nav-height in desktop @nav-link-color: #fff; @nav-link-hover-color: @nav-link-color; @nav-link-active-color: @main-color; @@ -2681,18 +2682,29 @@ top: 1px; } +.main-navigation .header-top__language-menu-btn { + line-height: @nav-height; +} + .main-navigation .header-top__language-menu-box-close-btn { - top: 5px; + height: @nav-height; } -.main-navigation .header-top__language-menu-btn { - line-height: @nav-height; +@media (min-width: @screen-md-min) { + .main-navigation .header-top__language-menu-btn { + line-height: @nav-height-md; + } + + .main-navigation .header-top__language-menu-box-close-btn { + height: @nav-height-md; + } } .main-navigation .header-top__language-menu-box { width: 100%; height: 100%; background-color: @nav-background-color; + border-bottom-width: 0; } .main-navigation .header-top__language-menu-box .header-top__language-menu-box-item { @@ -2700,6 +2712,12 @@ line-height: @nav-height; } +@media (min-width: @screen-md-min) { + .main-navigation .header-top__language-menu-box .header-top__language-menu-box-item { + line-height: @nav-height-md; + } +} + .main-navigation .header-top__language-menu { display: none; } @@ -2710,7 +2728,6 @@ } ._header-top-search-btn .main-navigation__search-btn { - // height: 50px; height: @header-top-height; } @@ -2747,6 +2764,7 @@ opacity: 0; visibility: hidden; transition: opacity 0.3s 0s, visibility 0s 0.3s; + height: @nav-height; } .main-navigation__search-box._header-top-search-btn._search-box-visible { @@ -3023,7 +3041,7 @@ } .main-navigation-fixed .header { - padding-bottom: @nav-height; + padding-bottom: @nav-height-md; } .main-navigation__items-wrp { @@ -3063,6 +3081,7 @@ .main-navigation__item-link { border: none; + line-height: @nav-height-md; } .main-navigation__open-sub-menu-link { @@ -3159,7 +3178,7 @@ color: @nav-link-arrow-color; position: relative; font-size: 30px; - line-height: @nav-height; + line-height: @nav-height-md; top: auto; left: auto; margin: 0; @@ -3236,6 +3255,12 @@ -webkit-tap-highlight-color: rgba(120, 120, 120, 0.3); } +@media (min-width: @screen-md-min) { + .main-navigation__search-btn { + height: @nav-height-md; + } +} + .main-navigation__search-btn:after, .main-navigation__search-btn:before { content: ''; @@ -3416,6 +3441,7 @@ opacity: 0; visibility: hidden; transition: opacity 0.3s 0s, visibility 0s 0.3s; + height: @nav-height-md; } } @@ -8765,7 +8791,7 @@ div.awesomplete li[aria-selected="true"] mark { ._dropdown-menu-with-columns .main-navigation__item._sub.open > .main-navigation__item-link:before { content: ''; position: absolute; - top: 52px; + bottom: 0; left: 50%; margin-left: -8px; width: 0; @@ -8782,8 +8808,8 @@ div.awesomplete li[aria-selected="true"] mark { } .touch ._dropdown-menu-with-columns .tablet-arrow .main-navigation__open-sub-menu-link { - top: -@nav-height; - height: @nav-height; + top: -@nav-height-md; + height: @nav-height-md; } .touch ._dropdown-menu-with-columns .main-navigation__item._sub._open-tablet-dropdown > .main-navigation__item-link { @@ -8797,7 +8823,7 @@ div.awesomplete li[aria-selected="true"] mark { .touch ._dropdown-menu-with-columns .main-navigation__item._sub._open-tablet-dropdown > .main-navigation__item-link:before { content: ''; position: absolute; - top: 52px; + bottom: 0; left: 50%; margin-left: -8px; width: 0; diff --git a/felayout_t3kit/dev/styles/customVariables.less b/felayout_t3kit/dev/styles/customVariables.less index 1fe8ba2f..74fd2fb8 100644 --- a/felayout_t3kit/dev/styles/customVariables.less +++ b/felayout_t3kit/dev/styles/customVariables.less @@ -37,6 +37,7 @@ // Navigation @nav-height: 60px; +@nav-height-md: @nav-height; // change to have unique nav-height in desktop @nav-link-color: #fff; @nav-link-hover-color: @nav-link-color; @nav-link-active-color: @main-color; diff --git a/felayout_t3kit/dev/styles/main/header/header.less b/felayout_t3kit/dev/styles/main/header/header.less index 0c243e62..a594bcd2 100644 --- a/felayout_t3kit/dev/styles/main/header/header.less +++ b/felayout_t3kit/dev/styles/main/header/header.less @@ -383,18 +383,29 @@ top: 1px; } +.main-navigation .header-top__language-menu-btn { + line-height: @nav-height; +} + .main-navigation .header-top__language-menu-box-close-btn { - top: 5px; + height: @nav-height; } -.main-navigation .header-top__language-menu-btn { - line-height: @nav-height; +@media (min-width: @screen-md-min) { + .main-navigation .header-top__language-menu-btn { + line-height: @nav-height-md; + } + + .main-navigation .header-top__language-menu-box-close-btn { + height: @nav-height-md; + } } .main-navigation .header-top__language-menu-box { width: 100%; height: 100%; background-color: @nav-background-color; + border-bottom-width: 0; } .main-navigation .header-top__language-menu-box .header-top__language-menu-box-item { @@ -402,6 +413,12 @@ line-height: @nav-height; } +@media (min-width: @screen-md-min) { + .main-navigation .header-top__language-menu-box .header-top__language-menu-box-item { + line-height: @nav-height-md; + } +} + .main-navigation .header-top__language-menu { display: none; } @@ -412,7 +429,6 @@ } ._header-top-search-btn .main-navigation__search-btn { - // height: 50px; height: @header-top-height; } @@ -449,6 +465,7 @@ opacity: 0; visibility: hidden; transition: opacity 0.3s 0s, visibility 0s 0.3s; + height: @nav-height; } .main-navigation__search-box._header-top-search-btn._search-box-visible { @@ -725,7 +742,7 @@ } .main-navigation-fixed .header { - padding-bottom: @nav-height; + padding-bottom: @nav-height-md; } .main-navigation__items-wrp { @@ -765,6 +782,7 @@ .main-navigation__item-link { border: none; + line-height: @nav-height-md; } .main-navigation__open-sub-menu-link { @@ -861,7 +879,7 @@ color: @nav-link-arrow-color; position: relative; font-size: 30px; - line-height: @nav-height; + line-height: @nav-height-md; top: auto; left: auto; margin: 0; @@ -938,6 +956,12 @@ -webkit-tap-highlight-color: rgba(120, 120, 120, 0.3); } +@media (min-width: @screen-md-min) { + .main-navigation__search-btn { + height: @nav-height-md; + } +} + .main-navigation__search-btn:after, .main-navigation__search-btn:before { content: ''; @@ -1118,6 +1142,7 @@ opacity: 0; visibility: hidden; transition: opacity 0.3s 0s, visibility 0s 0.3s; + height: @nav-height-md; } } diff --git a/felayout_t3kit/dev/styles/main/nav/dropdownMenuWithColumns.less b/felayout_t3kit/dev/styles/main/nav/dropdownMenuWithColumns.less index 5e6a127f..1388d3d0 100644 --- a/felayout_t3kit/dev/styles/main/nav/dropdownMenuWithColumns.less +++ b/felayout_t3kit/dev/styles/main/nav/dropdownMenuWithColumns.less @@ -64,7 +64,7 @@ ._dropdown-menu-with-columns .main-navigation__item._sub.open > .main-navigation__item-link:before { content: ''; position: absolute; - top: 52px; + bottom: 0; left: 50%; margin-left: -8px; width: 0; @@ -81,8 +81,8 @@ } .touch ._dropdown-menu-with-columns .tablet-arrow .main-navigation__open-sub-menu-link { - top: -@nav-height; - height: @nav-height; + top: -@nav-height-md; + height: @nav-height-md; } .touch ._dropdown-menu-with-columns .main-navigation__item._sub._open-tablet-dropdown > .main-navigation__item-link { @@ -96,7 +96,7 @@ .touch ._dropdown-menu-with-columns .main-navigation__item._sub._open-tablet-dropdown > .main-navigation__item-link:before { content: ''; position: absolute; - top: 52px; + bottom: 0; left: 50%; margin-left: -8px; width: 0;