Skip to content
Snippets Groups Projects

Resolve "Modify main menu items to have shadow only when has-header is on"

Merged Resolve "Modify main menu items to have shadow only when has-header is on"
38-modify-main-menu-items-to-have-shadow-only-when-has-header-is-on into master
Merged Konstantinos Platis requested to merge 38-modify-main-menu-items-to-have-shadow-only-when-has-header-is-on into master
Viewing commit 832eeb95
Next
Show latest version
3 files
+ 258
− 205
Compare changes
  • Side-by-side
  • Inline
Files
3
css/header.css
+ 256
− 193
header .site-info__text {
overflow-wrap: break-word; }
header .site-info__text a, header .site-info__text__slogan {
text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black; }
header .site-info__text__name {
white-space: unset;
text-overflow: unset; }
overflow-wrap: break-word;
}
header .site-info__text__name {
white-space: unset;
text-overflow: unset;
}
header .region-header > .name {
display: block; }
display: block;
}
header .region-header > .navbar-text {
display: block; }
header .region-header .language-switcher-language-url a {
text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black; }
display: block;
}
@media only screen and (max-width: 1023px) {
header .region-header > .navbar-text {
display: none; } }
display: none;
}
}
header.menu-expanded {
top: 0;
position: fixed;
width: 100%;
z-index: 500; }
header.menu-expanded .header-wrapper {
padding: 10px 5%; }
header.menu-expanded .site-info__logo {
max-width: 25%;
width: auto; }
header.menu-expanded .site-info__logo img {
max-height: 50px; }
header.menu-expanded .site-info__text__slogan {
display: none; }
header.menu-expanded .nav > li > a {
line-height: 56px; }
header.menu-expanded .nav > li > a:after {
bottom: 9px; }
header.menu-expanded .navbar-default .navbar-toggle:hover,
header.menu-expanded .navbar-default .navbar-toggle:focus,
header.menu-expanded .navbar-default .navbar-toggle {
top: 20%; }
header.menu-expanded .navbar-default.main-menu .navbar-toggle {
top: 33px; }
z-index: 500;
}
header.menu-expanded .header-wrapper {
padding: 10px 5%;
}
header.menu-expanded .site-info__logo {
max-width: 25%;
width: auto;
}
header.menu-expanded .site-info__logo img {
max-height: 50px;
}
header.menu-expanded .site-info__text__slogan {
display: none;
}
header.menu-expanded .nav > li > a {
line-height: 56px;
}
header.menu-expanded .nav > li > a:after {
bottom: 9px;
}
header.menu-expanded .navbar-default .navbar-toggle:hover,
header.menu-expanded .navbar-default .navbar-toggle:focus,
header.menu-expanded .navbar-default .navbar-toggle {
top: 20%;
}
header.menu-expanded .navbar-default.main-menu .navbar-toggle {
top: 33px;
}
.toolbar-fixed header.menu-expanded {
top: 39px;
margin-top: 0 !important; }
margin-top: 0 !important;
}
.toolbar-vertical header.menu-expanded {
top: 39px;
margin-top: 0 !important; }
margin-top: 0 !important;
}
.toolbar-fixed.toolbar-tray-open header.menu-expanded {
top: 78px; }
top: 78px;
}
.toolbar-fixed.toolbar-tray-open.toolbar-vertical header.menu-expanded {
top: 39px; }
top: 39px;
}
.sticky-header header .site-info {
min-height: 56px; }
.sticky-header header .site-info img {
left: 0; }
min-height: 56px;
}
.sticky-header header .site-info img {
left: 0;
}
header .nav > li {
margin: 0 20px; }
header .nav > li:nth-last-child(2) {
margin-right: 35px; }
margin: 0 20px;
}
header .nav > li:nth-last-child(2) {
margin-right: 35px;
}
header .site-info__text__name {
padding: 2px 0 0; }
padding: 2px 0 0;
}
header .site-info + .site-nav nav {
float: none; }
float: none;
}
.region-header {
text-align: right; }
.region-header > nav, .region-header > .block-language {
display: inline-block;
vertical-align: top; }
text-align: right;
}
.region-header > nav, .region-header > .block-language {
display: inline-block;
vertical-align: top;
}
.sticky-header:not(.open-cern-menu) header .navbar-default.main-menu .navbar-toggle {
top: 32px; }
top: 32px;
}
@media only screen and (max-width: 767px) {
.sticky-header:not(.open-cern-menu) header .nav > li > a {
line-height: 35px !important; } }
line-height: 35px !important;
}
}
.block-language {
position: relative; }
.block-language h2.block-title {
display: none; }
.block-language .active-language {
padding: 0 0 0 10px; }
.block-language .active-language a {
-webkit-transition: all 0.3s ease-in-out 0s;
-khtml-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
font-size: 16px;
font-size: 1.6rem;
font-family: "opensans-bold";
padding: 0;
line-height: 76px;
position: relative;
text-transform: uppercase; }
.block-language .active-language a:after {
-webkit-transition: width 0.3s ease-in-out 0s;
-khtml-transition: width 0.3s ease-in-out 0s;
-moz-transition: width 0.3s ease-in-out 0s;
-ms-transition: width 0.3s ease-in-out 0s;
-o-transition: width 0.3s ease-in-out 0s;
transition: width 0.3s ease-in-out 0s;
content: '';
display: block;
height: 2px;
width: 0%;
position: absolute;
bottom: -10px;
left: 0; }
.block-language .active-language a:hover {
background: transparent; }
.block-language .active-language a:hover:after {
width: 100%; }
.block-language .active-language a:focus {
background: transparent; }
.block-language .active-language a span.separator {
position: absolute;
left: -20px;
top: -2px;
line-height: 21px; }
.block-language .active-language a span.caret {
position: absolute;
right: -20px;
top: 49%; }
.block-language > ul.links {
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
-khtml-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
-ms-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
-o-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-opacity: 0;
-khtml-opacity: 0;
-moz-opacity: 0;
-ms-opacity: 0;
-o-opacity: 0;
opacity: 0;
list-style: none;
margin: 0;
padding: 10px 12px;
position: absolute;
top: 80px; }
.block-language > ul.links::before {
left: unset;
right: 10px;
top: -23px;
content: '';
width: 0px;
height: 0px;
background: transparent;
border-width: 12px;
border-style: solid;
position: absolute; }
.block-language > ul.links a {
font-size: 16px;
font-size: 1.6rem;
font-family: "opensans-bold";
padding: 0;
line-height: 25px;
display: block;
text-transform: uppercase;
position: relative; }
.block-language > ul.links a:after {
-webkit-transition: width 0.3s ease-in-out 0s;
-khtml-transition: width 0.3s ease-in-out 0s;
-moz-transition: width 0.3s ease-in-out 0s;
-ms-transition: width 0.3s ease-in-out 0s;
-o-transition: width 0.3s ease-in-out 0s;
transition: width 0.3s ease-in-out 0s;
content: '';
display: block;
height: 2px;
width: 0%;
position: absolute;
bottom: -4px;
left: 0; }
.block-language > ul.links a:hover {
background: transparent; }
.block-language > ul.links a:hover:after {
width: 100%; }
.block-language > ul.links a:focus {
background: transparent; }
.block-language > ul.links.language-expanded {
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-opacity: 1;
-khtml-opacity: 1;
-moz-opacity: 1;
-ms-opacity: 1;
-o-opacity: 1;
opacity: 1; }
position: relative;
}
.block-language h2.block-title {
display: none;
}
.block-language .active-language {
padding: 0 0 0 10px;
}
.block-language .active-language a {
-webkit-transition: all 0.3s ease-in-out 0s;
-khtml-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
font-size: 16px;
font-size: 1.6rem;
font-family: "opensans-bold";
padding: 0;
line-height: 76px;
position: relative;
text-transform: uppercase;
}
.block-language .active-language a:after {
-webkit-transition: width 0.3s ease-in-out 0s;
-khtml-transition: width 0.3s ease-in-out 0s;
-moz-transition: width 0.3s ease-in-out 0s;
-ms-transition: width 0.3s ease-in-out 0s;
-o-transition: width 0.3s ease-in-out 0s;
transition: width 0.3s ease-in-out 0s;
content: "";
display: block;
height: 2px;
width: 0%;
position: absolute;
bottom: -10px;
left: 0;
}
.block-language .active-language a:hover {
background: transparent;
}
.block-language .active-language a:hover:after {
width: 100%;
}
.block-language .active-language a:focus {
background: transparent;
}
.block-language .active-language a span.separator {
position: absolute;
left: -20px;
top: -2px;
line-height: 21px;
}
.block-language .active-language a span.caret {
position: absolute;
right: -20px;
top: 49%;
}
.block-language > ul.links {
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
-khtml-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
-ms-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
-o-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17);
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-opacity: 0;
-khtml-opacity: 0;
-moz-opacity: 0;
-ms-opacity: 0;
-o-opacity: 0;
opacity: 0;
list-style: none;
margin: 0;
padding: 10px 12px;
position: absolute;
top: 80px;
}
.block-language > ul.links::before {
left: unset;
right: 10px;
top: -23px;
content: "";
width: 0px;
height: 0px;
background: transparent;
border-width: 12px;
border-style: solid;
position: absolute;
}
.block-language > ul.links a {
font-size: 16px;
font-size: 1.6rem;
font-family: "opensans-bold";
padding: 0;
line-height: 25px;
display: block;
text-transform: uppercase;
position: relative;
}
.block-language > ul.links a:after {
-webkit-transition: width 0.3s ease-in-out 0s;
-khtml-transition: width 0.3s ease-in-out 0s;
-moz-transition: width 0.3s ease-in-out 0s;
-ms-transition: width 0.3s ease-in-out 0s;
-o-transition: width 0.3s ease-in-out 0s;
transition: width 0.3s ease-in-out 0s;
content: "";
display: block;
height: 2px;
width: 0%;
position: absolute;
bottom: -4px;
left: 0;
}
.block-language > ul.links a:hover {
background: transparent;
}
.block-language > ul.links a:hover:after {
width: 100%;
}
.block-language > ul.links a:focus {
background: transparent;
}
.block-language > ul.links.language-expanded {
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-opacity: 1;
-khtml-opacity: 1;
-moz-opacity: 1;
-ms-opacity: 1;
-o-opacity: 1;
opacity: 1;
}
/* sticky */
.sticky-header .block-language .active-language a {
line-height: 56px; }
line-height: 56px;
}
/* responsive */
@media only screen and (max-width: 767px) {
.region-header {
text-align: left; }
text-align: left;
}
header .site-info + .site-nav nav {
width: 100%; }
width: 100%;
}
.region-header > .block-language {
position: absolute;
display: none;
right: 30px;
margin: auto;
top: 67px; }
.region-header > .block-language .active-language a span.separator {
display: none; }
top: 67px;
}
.region-header > .block-language .active-language a span.separator {
display: none;
}
header .block-language ul.links {
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@@ -229,15 +278,20 @@ header .site-info + .site-nav nav {
-ms-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-o-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
top: 60px; }
header .block-language ul.links:before {
display: none; }
top: 60px;
}
header .block-language ul.links:before {
display: none;
}
.menu-expanded .region-header > .block-language {
display: block; }
display: block;
}
.main-menu .navbar-nav {
padding: 0 50px 0 0; } }
padding: 0 50px 0 0;
}
}
/*
element.style {
display: block;
@@ -249,29 +303,38 @@ element.style {
}
*/
header .main-menu .dropdown-menu a {
display: block; }
header .main-menu .dropdown-menu a .caret {
display: none; }
display: block;
}
header .main-menu .dropdown-menu a .caret {
display: none;
}
header .main-menu .dropdown-menu .dropdown-menu {
display: block;
position: static;
width: 100%;
box-shadow: 0 0 0 0;
padding: 10px 10px 1px; }
header .main-menu .dropdown-menu .dropdown-menu li {
margin: 0; }
header .main-menu .dropdown-menu .dropdown-menu a {
min-height: 25px;
padding: 0 0 0 20px; }
header .main-menu .dropdown-menu .dropdown-menu:before {
display: none; }
padding: 10px 10px 1px;
}
header .main-menu .dropdown-menu .dropdown-menu li {
margin: 0;
}
header .main-menu .dropdown-menu .dropdown-menu a {
min-height: 25px;
padding: 0 0 0 20px;
}
header .main-menu .dropdown-menu .dropdown-menu:before {
display: none;
}
nav.main-menu .dropdown-menu {
left: unset;
right: -25px; }
nav.main-menu .dropdown-menu:before {
left: 120px; }
nav.main-menu .dropdown-menu > li > a {
white-space: normal; }
right: -25px;
}
nav.main-menu .dropdown-menu:before {
left: 120px;
}
nav.main-menu .dropdown-menu > li > a {
white-space: normal;
}
/*# sourceMappingURL=header.css.map */