File: /home/zwafgyp/dodolodge-net/wp-content/themes/hotel-wp/assets/sass/header/_header.scss
/*
* Style header */
header#masthead {
.mobile-logo {
display: none;
}
.navigation {
transition: all ease-in-out .5s;
}
&.affix {
@include box-shadow(1px 0 3px 2px rgba(0, 0, 0, 0.1));
}
.retina-logo {
display: none;
}
&.has-retina-logo {
@media(-webkit-min-device-pixel-ratio: 2),
(min--moz-device-pixel-ratio: 2),
(-o-min-device-pixel-ratio: 2/1),
(min-device-pixel-ratio: 2),
(min-resolution: 192dpi),
(min-resolution: 2dppx) {
.no-sticky-logo {
max-width: 180px;
display: inline-block !important;
}
.logo,
.mobile-logo,
.sticky-logo img {
display: none !important;
}
.retina-logo {
display: inline-block !important;
}
}
}
&.header_v1 {
padding: 11px 0;
}
&.header_v2{
&.affix{
padding-top: 0px;
padding-bottom: 0;
}
&.header-default{
.header-v2{
.navigation{
.tm-table{
.width-navigation{
.inner-navigation{
.navbar{
.menu-right{
>.widget{
padding: 0 30px;
@media(max-width:1740px){
padding: 0 20px;
}
@media(max-width:1550px){
padding: 0 15px;
}
@media(max-width:1440px){
padding: 0 10px;
}
&:first-child{
padding-left: 0;
}
&:last-child{
position: relative;
&::before{
position: absolute;
content: '';
width: 1px;
height: 40px;
left: 0;
top: 50%;
background: $border-color;
transform: translateY(-50%);
@media(max-width:1199px){
display: none;
}
}
}
}
.header-info{
li{
padding: 0 40px;
@media(max-width:1740px){
padding: 0 20px;
}
@media(max-width:1500px){
padding: 0 15px;
}
@media(max-width:1299px){
padding: 0 10px;
}
&:last-child{
padding-right: 0;
}
&:first-child{
padding-left: 0;
}
.value{
font-weight: 600;
}
a{
&.btn-book{
color: #fff !important;
padding: 15px 35px;
@media(max-width: 1440px){
padding: 15px 25px;
}
}
}
}
}
.select2-container--default{
.select2-selection--single{
border-bottom: none;
.select2-selection__rendered{
text-transform: capitalize;
font-weight: 600;
}
}
}
}
>li{
&.menu-item{
>a{
font-weight: 600;
}
}
}
}
}
}
}
}
}
}
&.header-overlay{
.header-v2{
position: relative;
&::before{
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top ,transparent, rgba(0,0,0,0.3) );
@media(max-width: 768px){
display: none;
}
}
}
&.affix{
.header-v2{
&::before{
display: none;
}
}
}
}
.header-v2{
padding: 0px 68px;
@media(max-width:1440px){
padding: 0 50px;
}
@media(max-width:1299px){
padding: 0 25px;
}
.navigation{
.tm-table{
.width-navigation{
margin-left: 200px;
.inner-navigation{
width: 100%;
padding-left: 12%;
@media(max-width:1710px){
padding-left: 6%;
}
@media(max-width:1550px){
padding-left: 20px;
}
.navbar{
>li{
&.menu-item{
float: left;
>a{
padding: 16px 20px;
font-weight: 500;
@media(max-width: 1439px){
padding: 16px 13px;
}
@media(max-width: 1024px){
padding: 12px 13px;
}
}
>span{
&.icon-toggle{
@media(max-width: 1439px){
right: 0px;
}
@media(max-width: 1024px){
right: -2px;
}
}
}
}
}
.menu-right{
padding-top: 0;
padding-bottom: 0;
display: inline-flex;
align-items: center;
> .widget{
padding: 0 16px;
@media(max-width:1440px){
padding: 0 10px;
}
&:last-child{
padding-right: 0;
}
}
>div{
&::after{
display: none;
}
}
.header-info{
li::after{
display: none;
}
li{
@media(max-width: 1024px){
&:last-child{
padding-left: 0;
}
&:first-child{
display: none;
}
}
.value{
font-size: 18px;
font-weight: 500;
display: flex;
align-items: center;
@media(max-width:1024px){
display: none;
}
i{
color: var(--thim-body-primary-color);
font-size:28px;
margin-right: 15px;
@media(max-width: 1299px){
margin-right: 5px;
}
}
}
a{
&.btn-book{
color: #000 !important;
font-size: 18px;
display: flex;
align-items: center;
padding: 15px 26px;
@media(max-width:1024px){
padding: 10px 20px;
}
&:hover{
background-color: var(--thim-body-primary-color) !important;
}
i{
font-size: 28px;
margin-right: 10px;
}
}
}
}
}
.select2-container--default{
@media(max-width:1024px){
display: none;
}
.select2-selection--single{
height: unset;
.select2-selection__arrow{
b{
display: none;
}
&::before{
content: '\f107';
position: absolute;
font-weight: 800;
font-family: 'Line Awesome Free';
top: 0;
right: 0;
font-size: 12px;
}
}
.select2-selection__rendered{
font-weight: 500;
}
}
}
}
}
}
}
}
}
}
}
&.header-default.sticky-header {
position: fixed;
left: 0;
right: 0;
}
&.header_v4 {
&.affix {
.top-toolbar {
display: none;
}
}
.width-logo {
text-align: center;
}
.top-toolbar {
border-bottom: 1px solid #f0f0f0;
padding-left: 50px;
color: #777777;
@media(max-width:1440px){
font-size: 14px;
}
@media(max-width:767px){
display: none;
}
.wpb_content_element {
margin: 0;
}
.select2-container--default {
width: auto !important;
.selection {
padding: 0 35px;
display: inline-block;
float: left;
.select2-selection--single {
position: relative;
height: auto;
border-bottom: unset;
.select2-selection__rendered {
line-height: 42px;
font-weight: 600;
}
.select2-selection__arrow {
line-height: 36px;
height: 36px;
width: 18px;
text-align: right;
&::before{
content: '\f107';
position: absolute;
font-weight: 800;
font-family: 'Line Awesome Free';
top: 1px;
right: 0;
font-size: 12px;
}
b {
display: none;
}
}
}
}
}
ul.menu {
margin: 0;
> li {
&:first-child {
border: none;
}
> a {
padding: 9px 25px;
line-height: 24px;
text-transform: capitalize;
display: inline-block;
color: #777777;
}
}
}
}
.toolbar-info {
line-height: 60px;
display: flex;
align-items: center;
@media(max-width:1299px){
font-size: 13px;
}
@media(max-width:768px){
line-height: 43px;
}
i {
font-size: 22px;
margin-right: 7px;
}
a.value{
margin-left: 5px;
}
}
.toolbar-right {
line-height: 60px;
@media(max-width:768px){
line-height: 1;
}
.wpb_wrapper {
display: inline-block;
float: right;
}
.wpb_content_element {
display: inline-block;
float: left;
}
}
.menu-right {
padding: 0px;
ul.header-info li a.btn-book {
padding: 32px 35px;
line-height: 1;
font-weight: normal;
display: inline-flex;
align-items: center;
i{
font-size: 28px;
margin-right: 10px;
}
}
}
.navigation {
.width-navigation {
padding: 0;
.inner-navigation {
width: 100%;
padding: 0px 0px 0px 60px;
.navbar {
> li {
&.menu-item {
padding: 18px 0px;
margin-right: 40px;
&.menu-item-has-children {
margin-right: 50px;
.sub-menu {
li {
a, span:not(.icon-toggle) {
padding: 8px 0;
font-size: 15px;
white-space: normal;
}
}
}
}
> a {
padding: 0;
display: inline-block;
line-height: 42px;
font-weight: 600;
}
span.icon-toggle {
position: relative;
line-height: 37px;
@include transform(none);
margin-left: 10px;
font-size: 14px;
}
}
&:last-child {
&.menu-item {
margin: 0px;
&.menu-item-has-children {
margin: 0px;
}
}
}
> .sub-menu {
top: 100%;
&:before {
content: '';
border-style: solid;
border-width: 0px 8px 8px 8px;
height: 0;
left: 24px;
margin-top: -6px;
position: absolute;
top: -2px;
width: 0;
}
}
.sub-menu {
min-width: 230px;
@include box-shadow(none);
li {
padding: 0 24px;
&:first-child {
margin-top: 15px;
}
&:last-child {
margin-bottom: 15px;
}
&:after {
display: none;
}
}
}
}
}
}
}
.show_xs {
display: none;
}
}
}
}
@media(max-width:1023px){
body{
&.responsive{
#primary-menu {
display: none;
}
header{
&#masthead{
.logo{
display: none;
}
.mobile-logo {
display: inline-block;
}
}
.width-navigation {
display: none;
}
&.sticky-header.affix .sm-logo {
.sticky-logo {
display: none !important;
}
.no-sticky-logo {
display: inline-block !important;
}
}
}
header#masthead {
&.header_v1,
&.header_v2 {
.width-logo {
width: 100%;
text-align: center;
}
}
&.header_v3 {
.navigation {
padding: 0;
}
.width-logo {
float: none;
width: auto;
text-align: center;
}
.menu-mobile-effect.navbar-toggle {
top: -12px;
}
}
&.sticky-header {
&.affix {
.sticky-logo img {
display: inline-block;
}
}
}
}
&.mobile-menu-open {
.navigation,
.navigation-top {
.menu-mobile-effect {
display: none;
}
}
.mobile-menu-container {
.mega-menu > li {
> a,
> span {
padding: 5px 0;
}
}
select {
background: transparent;
border: 0;
margin-left: 13px;
margin-top: 20px;
min-width: 60px;
color: #fff;
option {
color: #333;
}
}
.header-info {
display: block;
margin: 20px 0 0;
li {
&:first-child {
padding-right: 0;
&:after {
display: none;
}
}
&:last-child {
padding-left: 0;
}
}
}
.dk-select {
margin-left: 0;
margin-top: 20px;
color: #333;
display: block;
.dk-selected {
min-width: 120px;
padding: 5px 10px;
&:before {
content: "\f107";
font-family: FontAwesome;
top: 7px;
right: 5px;
border: none !important;
}
&:after {
border: none !important;
}
&:hover,
&:focus {
border-color: transparent !important;
&:after {
border-color: transparent !important;
}
}
}
.dk-select-options {
left: 0;
right: 0;
padding: 0;
.dk-option {
margin-bottom: 0;
}
}
&.dk-select-open-down {
.dk-selected:before {
content: "\f106";
}
}
}
.menu-mobile-effect {
position: absolute;
top: 11px;
right: 32px !important;
.icon-bar {
@include rotate(-45deg);
top: 13px;
&:nth-child(2) {
@include opacity(0);
}
&:nth-child(3) {
@include rotate(45deg);
top: 13px;
}
}
}
.navbar-nav .sub-menu {
position: relative;
&:before {
content: '';
width: 1px;
height: 100%;
position: absolute;
left: 2px;
top: 1px;
display: block;
}
li {
position: relative;
&:before {
content: '';
width: 7px;
height: 1px;
position: absolute;
left: 3px;
top: 10px;
padding: 0;
display: block;
background: #fff;
}
a {
padding-left: 25px !important;
}
}
.sub-menu {
margin-left: 20px;
}
}
}
}
&.creative-left {
&.mobile-menu-open {
.menu-mobile-effect.navbar-toggle {
right: auto !important;
left: 15px !important;
}
}
.menu-mobile-effect.navbar-toggle {
left: 15px !important;
}
.mobile-menu-container {
@include translateX(-270px);
left: 0;
}
}
&.creative-right {
.menu-mobile-effect.navbar-toggle {
right: 0;
}
.mobile-menu-container {
right: 0;
@include translate(100%, 0px);
}
}
&:not(.mobile-menu-open) .menu-mobile-effect.navbar-toggle {
top: 50%;
@include translate(-50%, -15px);
@include transition(all 1s);
}
&.mobile-menu-open {
&.content-pusher {
&:after {
@include opacity(1);
}
.mobile-menu-container ul.sub-menu li a {
font-size: 13px;
}
}
.mobile-effect.mobile-menu-container {
visibility: visible;
box-shadow: 0 1px 5px -2px rgba(42, 42, 42, .4);
@include translate(0, 0);
}
}
.mobile-menu-container {
position: fixed;
visibility: hidden;
top: 0;
bottom: 0;
z-index: 999999;
width: 270px;
height: 100%;
overflow: auto;
@include transition(all 0.5s);
.select2-container {
width: 100% !important;
display: block;
}
span.icon-toggle {
cursor: pointer;
}
.menu-right {
display: block;
}
> .nav {
margin-top: 15px;
padding-left: 5px;
padding-right: 5px;
}
ul {
float: none;
&.navbar-nav {
margin: 60px 0 0;
}
&.mega-menu {
margin: 0;
padding: 0 5px;
> li {
margin: 0;
> a,
> span:not(.icon-toggle) {
padding: 10px 15px !important;
line-height: 20px;
}
}
li .icon-toggle {
top: 2px !important;
}
}
&.sub-menu {
background-image: none !important;
margin-top: 0;
margin-bottom: 0;
overflow: hidden;
display: none;
li {
ul {
display: block;
}
}
}
li {
float: none;
list-style: none;
position: relative;
&.current-menu-parent {
ul.sub-menu {
display: block;
}
}
&.disable_link {
margin-left: 20px;
}
.icon-toggle {
position: absolute;
right: 15px;
width: 32px;
height: 32px;
top: 9px;
&:before,
&:after {
display: none;
}
.fa {
vertical-align: middle;
}
}
a {
display: block;
outline: none;
-webkit-transition: background 0.3s, box-shadow 0.3s;
transition: background 0.3s, box-shadow 0.3s;
&:hover,
:focus {
background: transparent;
}
}
}
}
}
.menu-mobile-effect {
&.navbar-toggle {
cursor: pointer;
float: right;
display: inline-block;
z-index: 1;
vertical-align: middle;
width: 30px;
height: 28px;
padding: 0;
position: absolute;
margin: 0;
top: 20px;
span.icon-bar {
width: 20px;
@include rounded(0);
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 6px;
&:nth-child(2) {
top: 13px;
}
&:nth-child(3) {
top: 20px;
}
@include transition(all 0.3s ease-in-out);
}
}
}
}
}
}
@media (max-width: 768px) {
body.responsive {
header#masthead.retina-logo .no-sticky-logo {
width: 200px;
max-width: 200px;
}
.content-pusher {
position: relative;
overflow: hidden;
}
.admin-bar {
.affix {
top: 0;
}
}
.content-pusher {
right: 0;
position: relative;
@include transition(all 0.5s);
height: 100%;
}
}
}
@media(min-width:1024px){
.mobile-menu-container {
display: none;
}
}
@media (min-width: 769px) {
header#masthead {
&.header_v1.header-overlay.affix-top {
padding-top: 30px;
}
}
.admin-bar {
.site-header.affix {
top: 32px !important;
}
}
}
.width-logo {
width: 200px;
}
.header_v3 .width-logo {
width: 100% !important;
}