Viewing File: /home/maglabs/lacentraleit/wp-content/themes/mlab/assets/less/_header.less
/* ============================================================
3.2. Header
=============================================================*/
#site-header {
&.header-style2 {
background-color: transparent;
}
}
[class*="header-style"] {
&:not(.site-header-sticky) {
//position: relative;
z-index: 9;
}
&.header-full {
.wrap {
width: 100%;
}
}
&.header-shadow {
border-bottom: none;
.box-shadow;
}
&.header-transparent {
position: absolute;
left: 0;
right: 0;
background: transparent;
color: @white;
+ .site-header-sticky + .site-content,+ .site-content {
.content-header {
padding-top: 195px;
@media only screen and (min-width: 415px) and (max-width: 768px) {
padding-top: 250px;
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
padding-top: 250px;
}
@media only screen and (min-width: 1025px) {
padding-top: 330px;
}
}
}
a {
color: @white;
}
}
.site-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
&:after {
display: none;
}
.social-icons {
display: none;
@media only screen and (min-width: 1025px) {
display: flex;
gap: 30px;
a {
i {
font-size: 20px;
}
}
}
}
}
.header-brand {
margin: 25px 0;
flex-shrink: 0;
}
.extras {
display: flex;
align-items: center;
gap: 30px;
}
.menu-extras {
list-style: none;
margin: 0 0 0 50px;
padding: 0;
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
margin: 0 0 0 25px;
}
> li {
> a {
position: relative;
z-index: 3;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background-color: @white;
.rounded(50%);
}
&.search-box {
position: relative;
&.active {
.widget_search {
visibility: visible;
.opacity(1);
}
input.search-field[type="search"] {
width: 270px;
@media only screen and (min-width: 801px) {
width: 300px;
}
}
> a {
transform: scale(0.8);
}
}
}
}
}
.header-info-text {
display: none;
font-size: 14px;
line-height: 20px;
.opacity(.75);
@media only screen and (min-width: 801px) {
display: block;
}
}
.navigator {
display: none;
@media only screen and (min-width: 481px) {
display: flex;
align-items: center;
}
.menu-primary {
display: none;
@media only screen and (min-width: 1025px) {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 45px;
li {
position: relative;
.sub-menu {
list-style: none;
padding: 20px 0;
margin: 0;
position: absolute;
left: -40px;
top: ~"calc(100% + 5px)";
visibility: hidden;
min-width: 220px;
transform: translateY(-6px) scale(.9);
//transform-origin: 29px 0;
background-color: @white;
.box-shadow4;
.opacity(0);
.rounded(15px);
.transition;
&:after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 5px;
top: -5px;
}
&:before {
//content: "";
background-color: @white;
position: absolute;
height: 16px;
width: 16px;
left: 40px;
top: -5px;
transform: rotate(45deg);
}
li {
padding: 0;
margin: 0;
a {
white-space: nowrap;
position: relative;
display: block;
font-size: 15px;
font-weight: 600;
line-height: 24px;
padding: 8px 40px;
.opacity(.75);
}
&:hover,
&[class*="current"] {
> a {
.opacity(1);
}
}
.sub-menu {
left: ~"calc(100% + 5px)";
top: -20px;
&:after {
top: 0;
right: 100%;
left: auto;
width: 5px;
bottom: 0;
height: auto;
}
}
}
}
&:hover {
> .sub-menu {
transform: translateY(0) scale(1);
visibility: visible;
.opacity(1);
}
}
&.btn {
&:after {
visibility: visible;
.opacity(1);
}
&:hover {
a {
color: @white;
}
}
&:last-child {
margin: 0 22px;
}
}
}
> li {
display: flex;
align-items: center;
> a {
position: relative;
font-weight: 600;
line-height: 21px;
padding: 20px 0;
}
&:before {
content: "";
position: absolute;
width: 0;
right: 0;
top: -1px;
background-color: @white;
height: 1px;
.transition(width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) 0s);
}
&:after {
content: "";
position: absolute;
left: -22px;
right: -22px;
top: 50%;
height: 46px;
background-color: rgba(255,255,255,.1);
z-index: -1;
transform: translateY(-50%);
visibility: hidden;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
.opacity(0);
.rounded(15px);
.transition;
}
&:hover,
&[class*="current"] {
&:before {
width: 100%;
left: 0;
right: auto;
}
&:after {
visibility: visible;
.opacity(1);
}
}
&.menu-item-has-children {
> a {
padding-right: 22px;
&:after {
content:"\ea7a";
font-family:"Nucleo";
font-weight: normal;
font-size: 12px;
line-height: 1;
position: absolute;
margin-left: 10px;
top: ~"calc(50% + 1px)";
transform: translateY(-50%);
.transition;
}
}
&:hover {
> a {
&:after {
transform: translateY(-50%) rotate(-180deg);
}
&[title] {
&:after {
transform: translateY(-1px) rotate(-180deg);
}
}
}
}
}
&.click {
> .menu-item-toggle {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
cursor: pointer;
}
> .sub-menu {
visibility: hidden;
transform: translateY(10px);
.opacity(0);
}
&.menu-item-expand {
> .sub-menu {
visibility: visible;
transform: translateY(0);
.opacity(1);
.sub-menu {
visibility: visible;
.opacity(1);
}
}
> .menu-item-toggle {
position: fixed;
}
&.menu-item-has-children {
> a {
&:after {
transform: translateY(-50%) rotate(-180deg);
}
&[title] {
&:after {
transform: translateY(-1px) rotate(-180deg);
}
}
}
}
&.megamenu {
> .sub-menu {
transform: translate(-50%,0);
}
}
}
&:hover {
> a {
&:after {
transform: translateY(-50%) rotate(0);
}
&[title] {
&:after {
transform: translateY(0) rotate(0);
}
}
}
}
}
&.megamenu {
> .sub-menu {
display: flex;
left: 50%;
transform: translateX(-50%);
padding: 30px 0 25px;
> li {
flex: 1 1;
width: 340px;
padding: 0 45px;
&:before {
display: none;
}
&:after {
content: "";
position: absolute;
left: -1px;
top: 5px;
bottom: 6px;
width: 1px;
background: rgba(0,0,60,.1);
}
&:first-child {
&:after {
display: none;
}
&:before {
transform: none;
top: 0;
}
}
> a {
padding: 0;
font-weight: 600;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 1px;
margin: 0 0 10px 0;
background-color: transparent !important;
.opacity(.4);
&:before,&:after {
display: none;
}
}
> .sub-menu {
min-width: 180px;
position: static;
transform: none;
padding: 0;
margin: 0 -15px;
background: none;
.box-shadow(none);
li {
transform: none;
.opacity(1);
&:last-child {
margin-bottom: 0;
}
a {
//background-color: transparent;
padding: 10px 15px;
white-space: normal;
display: flex;
line-height: 24px;
align-items: flex-start;
gap: 15px;
.rounded(8px);
i, img {
text-align: center;
font-size: 24px;
width: 24px;
}
}
}
}
}
}
&:hover {
> .sub-menu {
> li {
.sub-menu {
visibility: visible;
.opacity(1);
}
}
}
}
&[class*="columns-"] {
position: static;
> .sub-menu {
width: 100%;
left: 0;
transform: none;
gap: 4%;
flex-wrap: wrap;
padding: 35px 0;
&:before {
content: "";
position: absolute;
left: -1000px;
right: -1000px;
top: 0;
bottom: 0;
}
&:after {
height: 35px;
top: -35px;
}
> li {
border: none;
margin: 0;
padding: 0;
flex: auto;
&:after {
display: none;
}
> a {
text-align: center;
display: block;
margin: 0;
img {
display: block;
margin: 10px 0 20px 0;
padding: 30px 15% 0;
background: rgba(0,0,60,.12);
.transition;
}
&:hover {
img {
background: rgba(0,0,60,.22);
}
}
}
}
}
&.columns-2 {
> .sub-menu > li {
width: ~"calc(50% - 50px)";
}
}
&.columns-3 {
> .sub-menu > li {
width: ~"calc(33.333333% - 50px)";
}
}
&.columns-4 {
> .sub-menu > li {
width: ~"calc(25% - 50px)";
}
}
&.columns-5 {
> .sub-menu > li {
width: ~"calc(20% - 50px)";
}
}
&.columns-6 {
> .sub-menu > li {
width: ~"calc(16.666666% - 50px)";
}
}
}
}
}
}
}
> a {
display: none;
@media only screen and (min-width: 1025px) {
display: block;
width: 30px;
height: 45px;
text-indent: -9999px;
position: relative;
&:before,span:after,span:before {
content:"";
width: 30px;
height: 3px;
position: absolute;
text-indent: 0;
left: 50%;
top: ~"calc(50% + 1px)";
transform: translate(-50%,-50%);
}
span {
&:before {
margin-top: -8px;
}
&:after {
margin-top: 8px;
}
}
}
}
}
a[data-target="off-canvas-right"] {
position: relative;
width: 70px;
height: 44px;
flex-shrink: 0;
order: 2;
background-color: @white;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 44px;
text-align: center;
.rounded(15px);
}
}
.header-style1 {
position: relative;
nav.navigator {
flex-grow: 1;
padding: 0 5%;
flex-direction: column;
@media only screen and (min-width: 1024px) and (max-width: 1280px) {
padding: 0 3%;
}
}
.header-info-text {
width: 100%;
text-align: center;
position: relative;
padding: 20px;
&:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 1px solid;
.opacity(.15);
}
+ .menu-primary {
gap: 10px;
justify-content: space-between;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
&:after {
display: none;
}
}
}
.menu-primary {
width: 100%;
> li {
&:after {
display: none;
}
&.btn:after {
display: block;
height: 36px;
}
&.btn:before {
display: none;
}
> a {
@media only screen and (min-width: 1024px) and (max-width: 1280px) {
font-size: 14px;
font-weight: 500;
}
}
}
}
.social-icons {
+ .menu-extras {
margin-left: 30px;
}
}
}
.header-style2 {
.header-info-text {
position: absolute;
top: 100%;
left: 0;
right: 0;
padding-top: 25px;
&:after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
border-bottom: 1px solid;
.opacity(.15);
}
}
.social-icons {
position: absolute;
top: ~"calc(100% + 25px)";
right: 0;
}
nav.navigator {
flex-grow: 1;
justify-content: flex-end;
.menu-primary > li:before {
display: none;
}
@media only screen and (min-width: 1024px) and (max-width: 1280px) {
.menu-primary {
gap: 30px;
}
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
nav.navigator {
justify-content: flex-start;
}
.header-info-text {
position: static;
padding: 0 30px;
max-width: 60%;
&:after {
display: none;
}
}
}
}
.header-style3 {
padding: 45px 0;
@media only screen and (max-width: 1024px) {
padding: 25px 0;
}
.header-brand {
margin: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
nav.navigator {
flex-grow: 1;
.menu-primary {
display: none;
}
}
.social-icons {
flex-grow: 1;
justify-content: flex-end;
}
.menu-extras {
margin-left: 40px;
}
a[data-target="off-canvas-right"] {
order: -1;
margin-right: 30px;
}
.header-info-text {
max-width: 270px;
}
}
.sliding-desktop-off {
.header-style3 a[data-target="off-canvas-right"] {
display: block;
}
}
Back to Directory
File Manager