File: /home/parhudrw/ve.anqa.it/wp-content/themes/vibrance/css/components/_header.scss
/* ------ Hamburger Menu ------- */
.cl-hamburger-menu {
display: none;
position: relative;
width: 30px;
height: 21px;
cursor: pointer;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
@include transition(all 0.25s);
position: relative;
display: inline-block;
span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 4px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
@include transition(all 0.25s);
}
}
.cl-header-light .cl-hamburger-menu span {
background-color: #fff !important;
}
.cl-hamburger-menu {
span {
&:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
&:nth-child(2) {
top: 9px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
&:nth-child(3) {
top: 18px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
}
&.open {
span {
&:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: -3px;
left: 4px;
}
&:nth-child(2) {
width: 0%;
opacity: 0;
}
&:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 18px;
left: 4px;
}
}
&.style-overlay, &.style-half_overlay {
z-index: 999999999;
}
&.active-color-light-text span {
background-color: #fff;
}
position: fixed;
}
}
.cl-extra-hero-widget{
position:absolute;
&.position-right_vertical_light{
display:none;
@include lg{
display:block;
right:70px;
top:50%;
@include transform(translateY(-50%));
}
z-index:9999;
font-weight: 500;
font-size: 16px;
line-height: 28px;
.widget{
writing-mode: vertical-rl;
text-orientation: mixed;
&:not(.widget_text):not(.widget_nav_menu){
display:none;
}
}
color:#fff;
ul{
list-style:none;
padding:0;
margin:0;
li{
display:inline-block;
padding:20px 0px;
a{
opacity:0.8;
@include transition(all 0.3s);
&:hover{
opacity:1;
}
}
}
}
}
&.position-right_vertical_dark{
display:none;
@include lg{
display:block;
right:70px;
top:50%;
@include transform(translateY(-50%));
}
z-index:9999;
font-weight: 500;
font-size: 16px;
line-height: 28px;
.widget{
writing-mode: vertical-rl;
text-orientation: mixed;
&:not(.widget_text):not(.widget_nav_menu){
display:none;
}
}
color:#000;
ul{
list-style:none;
padding:0;
margin:0;
li{
display:inline-block;
padding:20px 0px;
a{
opacity:0.8;
@include transition(all 0.3s);
&:hover{
opacity:1;
}
}
}
}
}
&.position-left_vertical_light{
display:none;
@include lg{
display:block;
left:70px;
top:50%;
@include transform(translateY(-50%));
}
z-index:999;
font-weight: 500;
font-size: 16px;
line-height: 28px;
.widget{
writing-mode: vertical-lr;
text-orientation: mixed;
transform: rotate(180deg);
&:not(.widget_text):not(.widget_nav_menu){
display:none;
}
}
color:#fff;
ul{
list-style:none;
padding:0;
margin:0;
li{
display:inline-block;
padding:20px 0px;
a{
opacity:0.8;
@include transition(all 0.3s);
&:hover{
opacity:1;
}
}
}
}
}
&.position-left_vertical_dark{
display:none;
@include lg{
display:block;
left:70px;
top:50%;
@include transform(translateY(-50%));
}
z-index:9999;
font-weight: 500;
font-size: 16px;
line-height: 28px;
.widget{
writing-mode: vertical-rl;
text-orientation: mixed;
&:not(.widget_text):not(.widget_nav_menu){
display:none;
}
}
color:#000;
ul{
list-style:none;
padding:0;
margin:0;
li{
display:inline-block;
padding:20px 0px;
a{
opacity:0.8;
@include transition(all 0.3s);
&:hover{
opacity:1;
}
}
}
}
}
}
.elementor-element.ce-submenu-icon-arrow .ce-nav-menu .parent-has-child .sub-arrow i{
font-family:feather;
//chevron down
&:before{
content:'\e842';
}
}
//chevron right
.elementor-element.ce-submenu-icon-arrow .ce-nav-menu__layout-horizontal .menu-item-has-children ul a .sub-arrow i:before{
content:'\e844';
}
//chevron up
@media (max-width:1023px){
.elementor-element.ce-nav-menu__breakpoint-tablet.ce-submenu-icon-arrow .ce-nav-menu__layout-horizontal .menu-item-has-children .sub-menu-active a .sub-arrow i:before{
content:'\e845';
}
.elementor-element.ce-nav-menu__breakpoint-tablet.ce-submenu-icon-arrow .ce-nav-menu__layout-horizontal .menu-item-has-children ul a .sub-arrow i:before{
content:'\e842';
}
}
@media (max-width:767px){
.elementor-element.ce-nav-menu__breakpoint-mobile.ce-submenu-icon-arrow .ce-nav-menu__layout-horizontal .menu-item-has-children .sub-menu-active a .sub-arrow i:before{
content:'\e845';
}
.elementor-element.ce-nav-menu__breakpoint-mobile.ce-submenu-icon-arrow .ce-nav-menu__layout-horizontal .menu-item-has-children ul a .sub-arrow i:before{
content:'\e842';
}
}
.ce-has-no-megamenu .sub-menu li:first-child > a.ce-sub-menu-item{
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.ce-has-no-megamenu .sub-menu li:last-child > a.ce-sub-menu-item{
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
header#masthead{
.widget_polylang{
select{
background:rgba(0,0,0,0);
box-shadow:none;
}
}
.search_field_on_click{
.widget_search{
input[type="search"]{
background: rgba(0,0,0,0);
width: 60px;
box-shadow: none;
display: inline-block;
@include transition(width 0.3s);
@include placeholder{
color:#000;
opacity:1;
}
&:focus{
width:140px;
}
}
}
}
.search_field_2{
display:flex;
justify-content:flex-end;
.widget_search{
width: auto;
display: inline-block;
input[type="search"]{
background: rgba(0,0,0,0);
width: 0px;
box-shadow: none;
display: inline-block;
@include transition(width 0.3s);
@include placeholder{
color:#000;
opacity:1;
}
}
}
&.open-field{
input[type="search"]{
min-width:60px;
}
}
}
.search_field_circle{
.widget_search{
display:flex;
justify-content:flex-end;
}
form{
height: 36px;
border-radius: 18px;
display: inline-flex;
align-items: center;
border: 1px solid #e1e1e1;
min-width:36px;
justify-content:center;
}
input[type="search"]{
width:0px;
margin:0;
padding:0px;
border-radius:18px;
box-shadow:none;
border:none;
margin-left:10px;
@include transition(all 0.3s);
}
i{
position:absolute;
right:10px;
top:50%;
@include transform(translateY(-50%));
}
&.open-field{
input[type="search"]{
width:110px;
}
}
}
}
.cl-header-default{
.container-fluid{
width:100%
}
.menu-col{
display:flex;
align-items:center;
justify-content: flex-end;
height:106px;
@media (max-width:992px){
> .menu-wrapper{
display:none;
}
}
}
.wrapper{
display:flex;
align-items:center;
height:100%;
}
.logo-wrapper{
display:flex;
align-items:center;
height:106px;
}
.menu-wrapper{
width: 100%;
display: flex;
height:100%;
justify-content: flex-end;
}
@media (min-width: 992px) {
.cl-header-default .menu-wrapper {
width: 100%;
}
.menu-wrapper {
.menu {
float: left;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
margin-top: 0;
li {
float: none;
display: inline-block;
position: relative;
height: 100%;
a:hover {
text-decoration: none;
}
}
> li {
margin-right:22px;
position:relative;
&.hasSubMenu{
> a:after{
content: '\e842';
font-family:feather;
padding-left:10px;
}
}
&:last-child{
margin-right:0;
}
&:hover > a {}
> a {
position: relative;
/*top:50%;
//margin-top:-10px;*/
float: none;
width: 100%;
padding:20px 16px;
font-weight:500;
line-height:106px;
&:hover{
color:var(--codeless-primary-color);
}
}
}
}
.menu {
> li > ul.sub-menu {
list-style: none;
margin: 0 !important;
display: none;
visibility: hidden;
position: absolute;
left: 0;
top: 100%;
left: 6px;
z-index: 9999999;
padding: 0px;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
border-radius: 4px;
min-width: 200px;
max-width: 200px;
padding: 0px;
background:#000;
border:1px solid #000;
ul {
list-style: none;
margin: 0 !important;
display: none;
visibility: hidden;
position: absolute;
left: 0;
top: 100%;
left: 6px;
z-index: 9999999;
padding: 0px;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
border-radius: 4px;
min-width: 200px;
max-width: 200px;
padding: 0px;
background:#000;
border:1px solid #000;
color:#fff !important;
}
}
li.showDropdown {
> ul {
display: block !important;
visibility: visible !important;
}
&.dropdownRightToLeft > ul {
left: auto;
right: 0;
}
}
}
.menu {
li {
> ul.sub-menu li {
z-index: 50005;
text-align: left;
margin: 0 !important;
padding: 0 !important;
height: auto;
display: block;
width: 100%;
-webkit-transition: background-color .15s ease-in-out;
-moz-transition: background-color .15s ease-in-out;
transition: background-color .15s ease-in-out;
background:rgba(0,0,0,0);
color:#fff !important;
a{
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
transform: translateZ(0);
color:#fff !important;
}
&:hover{
background:rgba(255,255,255,0.1);
}
}
ul.sub-menu li {
border-radius:4px;
a {
display: block;
padding: 10px 20px;
border-radius:4px;
width: 100%;
letter-spacing: 0;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
transform: translateZ(0);
font-smoothing: antialiased !important;
@include transform(translate3d(0px, 0px, 0px));
@include transition(all 0.3s);
&:hover{
@include transform(translate3d(4px, 0px, 0px));
}
}
&.hasSubMenu > a {
position: relative;
}
&:last-child {
border-bottom: none;
}
}
}
> li > ul.sub-menu li > .sub-menu {
top: 0;
left: 100%;
}
}
}
}
}