File manager - Edit - /home/verseaumee/geniouskin/wp-content/themes/ixlab/assets/less/_header.less
Back
/* ============================================================ 3.2. Header =============================================================*/ [class*="header-style"] { padding: 12px 0; @media only screen and (min-width: 769px) { padding: 24px 0; } &:not(.site-header-sticky) { position: relative; z-index: 9; } &.header-full { .wrap { width: 100%; } } &.header-shadow { border-color: transparent; .box-shadow; } &.header-transparent { position: absolute; left: 0; right: 0; background: transparent; + .site-content .content-header,+ .site-header-sticky + .site-content .content-header { padding-top: 112px; @media only screen and (min-width: 769px) { padding-top: 136px; } @media only screen and (min-width: 1025px) { padding-top: 216px; } } } .site-header-inner { display: flex; align-items: center; justify-content: space-between; &:after { display: none; } } .header-brand { flex-shrink: 0; margin-right: 64px; position: relative; z-index: 2; a { display: block; } } .social-icons { display: flex; } .header-info-text { position: relative; &:empty { display: none; } ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; gap: 64px; } .info { display: flex; align-items: center; gap: 16px; i { font-size: 48px; } img { width: 48px; height: 48px; } span { display: block; font-size: 14px; line-height: 20px; .opacity(.7); } address { font-style: normal; display: flex; align-items: center; //font-weight: 400; gap: 16px; span { height: 16px; width: 1px; background-color: rgba(0,0,0,.3); } } } .cta { display: none; @media only screen and (min-width: 1025px) { background-color: @white; padding: 12px; display: flex; align-items: center; justify-content: center; flex-grow: 1; .box-shadow2; } } .link { font-size: 12px; line-height: 24px; letter-spacing: 0.5px; font-weight: 500; text-transform: uppercase; display: inline-block; &:before { content: ""; position: absolute; top: -12px; bottom: -12px; left: -12px; right: -12px; } } @media only screen and (max-width: 1366px) { font-size: 14px; .info { gap: 12px; i { font-size: 40px; } img { width: 40px; height: 40px; } } } @media only screen and (max-width: 1024px) { flex-grow: 1; } @media only screen and (max-width: 768px) { display: none; } } .navigator { &:not(.menu-extras) { flex-grow: 1; display: none; @media only screen and (min-width: 1025px) { display: block; .menu-primary { display: flex; list-style: none; margin: 0; padding: 0; position: relative; gap: 36px; li { position: relative; > a { position: relative; z-index: 3; white-space: nowrap; display: block; } .sub-menu { list-style: none; padding: 28px 0; margin: 0; position: absolute; left: -36px; top: ~"calc(100% + 24px)"; visibility: hidden; min-width: 280px; transform: translateY(0px); .opacity(0); //.transition; &:after { content:""; position: absolute; width: 1000000px; height: 2000px; bottom: -32px; left: -100000px; background-color: @white; z-index: -1; .box-shadow2; } li { padding: 0; margin: 0 0 8px 0; &:last-child { margin-bottom: 0; } a { white-space: nowrap; position: relative; display: block; padding: 0 36px; line-height: 20px; font-size: 14px; &:before { display: none; } } .sub-menu { padding-top: 28px; left: ~"calc(100% + 1px)"; top: -28px; } } } &:hover { > .sub-menu { transform: translateY(0); visibility: visible; .opacity(1); } } } > li { &.megamenu { position: static; > .sub-menu { display: flex; padding-bottom: 0; > li { margin-bottom: 0; > a { margin: 2px 0; &:not(:hover) { .opacity(.5); } &:hover { color: inherit; } } } .sub-menu { padding-top: 24px; position: static; min-width: 176px; transform: translateY(0); background-color: transparent; .box-shadow(none); &:after { display: none; } li { margin-bottom: 4px; &:last-child { margin-bottom: 0; } } } } &:hover { > .sub-menu { > li { .sub-menu { visibility: visible; .opacity(1); } } } } .large { .sub-menu { padding-top: 16px; li { a { font-size: 20px; line-height: 32px; font-weight: 500; letter-spacing: -0.2px; } } } } } > a { font-weight: 400; padding: 12px 0; } } } } } } } .header-style1 { @media only screen and (max-width: 1280px) { .header-info-text { .info { img,i { display: none; } } } .header-brand { margin-right: 32px; } .navigator .menu-primary { gap: 32px; } } @media only screen and (max-width: 1440px) { .header-info-text { ul { gap: 32px; } .info address { gap: 12px; } } .header-brand { margin-right: 44px; } } .header-info-text { @media only screen and (min-width: 1025px) { width: ~"calc(50% - 16px)"; } } } .header-style1 + .header-style { + .header-style, .navigator:not(.menu-extras),.header-info-text { display: none; } .navigator:not(.menu-extras) { .menu-primary { justify-content: space-between; align-items: center; gap: 12px; &:after { content:""; width: 64px; margin-right: -64px; } > li > a { font-size: 44px; text-transform: uppercase; } } } } .header-style2 { @media only screen and (max-width: 1280px) { .header-info-text { .info { img,i { display: none; } } } .header-brand { margin-right: 32px; } .navigator .menu-primary { gap: 32px; } } @media only screen and (max-width: 1440px) { .header-info-text { ul { gap: 32px; } .info address { gap: 12px; } } .header-brand { margin-right: 44px; } } .header-info-text { @media only screen and (min-width: 1025px) { width: ~"calc(50% - 16px)"; } } &.header-transparent.header-full { @media only screen and (min-width: 1025px) { position: fixed; margin-top: 20px; &:after { content: ""; position: absolute; left: 20px; right: 20px; background-color: rgba(21,21,21,.5); bottom: 0; border-bottom: 1px solid @white; top: 0; z-index: -1; backdrop-filter: blur(6px); } } } + .header-style { @media only screen and (min-width: 1025px) { display: none; } } } .header-style3,.header-style3 + .header-style { &.header-transparent { position: fixed; backdrop-filter: blur(6px); } + .header-style, .navigator:not(.menu-extras), .header-info-text .cta, .header-info-text .info img, .header-info-text .info div > span { display: none; } .navigator:not(.menu-extras) { .menu-primary { justify-content: space-between; align-items: center; gap: 12px; &:after { content:""; width: 64px; margin-right: -64px; } > li > a { font-size: 44px; text-transform: uppercase; } } } .header-info-text { flex-grow: 1; } } .sliding-desktop-off { .site-header.header-style3,.header-style1 + .header-style { a[data-target="off-canvas-right"] { display: block; position: relative; } + .header-style { a[data-target="off-canvas-right"] { display: block; } } } @media only screen and (min-width: 1025px) { .site:before,.off-canvas.sliding-menu { display: none; } &.off-canvas-right-active { .header-info-text,.header-brand { display: none; } .navigator:not(.menu-extras) { display: block; } } } } .header-style4,.header-style4 + .header-style { + .header-style, .header-info-text .cta, .header-info-text .info img, .header-info-text .info div > span { display: none; } .header-brand { @media only screen and (min-width: 1025px) { position: absolute; top: 0; } } .header-info-text { @media only screen and (min-width: 1025px) { font-size: 14px; line-height: 20px; position: absolute; right: 0; transform: rotate(90deg) translateX(100%); transform-origin: right; } } .navigator:not(.menu-extras) { position: absolute; top: 98px; .menu-primary { flex-direction: column; gap: 12px; counter-reset: my-badass-counter; > li { position: relative; &.megamenu { position: relative; } &:before { content:"{"; position: absolute; left: 4px; z-index: 5; .opacity(0); &:extend(.transition); } &:after { content:"}"; position: absolute; top: 0; left: 32px; z-index: 5; .opacity(0); &:extend(.transition); } &:hover,&[class*="current"] { &:before,&:after { .opacity(1); } > a:before { .opacity(1); } } > a { padding: 0; display: flex; gap: 12px; &:before { width: 43px; font-weight: 300; text-align: center; counter-increment: my-badass-counter; content: counter(my-badass-counter) ""; .opacity(.5); } } ul.sub-menu { min-width: 200px; top: 0; left: ~"calc(100% + 60px)"; padding: 0 0 120px 0; } } } } }
| ver. 1.4 |
Github
|
.
| PHP 8.5.7 | Generation time: 0 |
proxy
|
phpinfo
|
Settings