yeuchaybo-v6/assets/styles/_header.scss

/* ## Site Header
--------------------------------------------- */

.site-header {
	/*position: absolute;*/
	z-index: 100;
	width: 100%;
	border-bottom: 1px solid rgba($gray, 0.3);
	background-color: $white;
	&.shrink {
		position: fixed;

		> .wrap {

			@include breakpoint(md) {
				height: 7rem;
			}
		}
	}

	@include transition;

	.sticky-header & {
		position: fixed;

		&.shrink {
			background-color: $white;
			box-shadow: 0 0 4rem rgba($dark, 0.05);

			> .wrap {

				@include breakpoint(md) {
					height: 7rem;
				}
			}
		}
	}

	.no-js & {
		position: relative;
	}

	.boxed-page & {
		max-width: map-get($breakpoints, lg);
		margin: 0 auto;
	}

	.contact-page & {
		background-color: $white;
	}

	> .wrap {
		display: flex;
		position: relative;
		height: 6rem;
		transition: height 0.3s ease;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		@include breakpoint(md) {
			height: 7rem;
			padding: 0;
			flex-wrap: nowrap;
		}

		.no-js & {
			height: auto;
			padding: 3rem 6vw;

			@include breakpoint(md) {
				padding: 0;
			}
		}
	}
}

.bumper {
	height: 61px;
	@include breakpoint(md) {
		height: 71px;
	}
}

.hidden{
    display: none;
}


/* ## Title Area
--------------------------------------------- */

.title-area {
	display: block;
	position: relative;
	width: 15rem;
	margin: 0 auto 0 0;
}

.site-title {
	margin-bottom: 0;
	font-size: 1.8rem;
	font-weight: $bold;
	line-height: 1;

	a {
		color: $dark;
		text-decoration: none;

		@include transition;

		.shrink & {
			color: $dark;
		}
	}
}

.site-description {
	margin-bottom: 0;
	opacity: 0.618;
	font-size: 1.4rem;
	line-height: 1;

	@include screen-reader-text;

	@include breakpoint(md) {
		line-height: 1.382;
		text-align: left;
	}
}

.custom-logo {
	display: block;

	.shrink & {
		display: block;
	}
}

.secondary-logo {
	display: none;

	.shrink & {
		display: none;
	}
}

/* ## Before Header
--------------------------------------------- */

.before-header {
	display: flex;
	position: relative;
	height: 4rem;
	border-top: 1px solid rgba($gray, 0.3);
	border-bottom: 1px solid rgba($gray, 0.3);
	color: $darker;
	background-color: $light;
	font-size: 1.2rem;
	flex-wrap: wrap;
	align-items: center;

	@include transition;

	@include breakpoint(md) {
		width: 100vw;
		max-width: 100%;
	}

	.sticky-header .shrink & {

		@include breakpoint(md) {
			margin-top: -4rem;
		}
	}

	.no-js & {
		height: auto;
		padding-top: 1rem;
		padding-bottom: 1rem;
	}

	.menu & {
		display: flex;
		width: 100%;
		height: auto;
		margin: 3em 0 0;
		padding: 3em 0 0;
		border-bottom: none;
		background-color: transparent;

		@include clearfix;

		.widget {
			margin-bottom: 1em;
		}

		.simple-social-icons {
			margin-left: -0.5em;

			a {
				margin: 0 0.5em 0 0;
			}
		}
	}

	.wrap {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		justify-content: space-between;

		@include flexfix;

		@include breakpoint(md) {
			width: 88%;
			max-width: map-get($breakpoints, lg);
			padding: 0;
		}
	}

	.widget {
		display: flex;
		margin-bottom: 0;
		align-items: center;

		&:last-of-type {
			margin-bottom: 0;
		}
	}

	.widget-wrap {
		width: 100%;
	}

	p {
		display: flex;
		align-items: center;

		@include breakpoint(xxs) {
			display: inline-flex;
			margin: 0 1em 0 0;
		}
	}

	.fa {
		margin-right: 0.5em;
	}

	.fa:before {
		line-height: 1.618;
	}

	.simple-social-icons ul li a {
		background-color: transparent !important;
	}
}

/* ## Header Right
--------------------------------------------- */

.header-widget-area {
	display: none;
	margin: 0 1em 0 0;

	@include breakpoint(md) {
		display: block;
		margin: 0 0 0 0.5em;
		order: 5;
	}

	@include breakpoint(lg) {
		margin: 0 0 0 2em;
	}

	.widget {

		&:last-of-type {
			margin-bottom: 0;
		}
	}
}

/* ## Hero Section
--------------------------------------------- */

.hero-section {
	position: relative;
	padding: 12rem 0 6rem;
	border-bottom: $site-border;
	background-color: $light;
	background-position: center;
	background-size: cover;
	text-align: center;

	@include overlay;

	@include breakpoint(sm) {
		padding: 16rem 0 16rem;
	}

	@include breakpoint(md) {
		padding: 20rem 0 16rem;
	}

	@include breakpoint(xl) {
		padding: 24rem 0 20rem;
	}

	.has-before-header & {

		@include breakpoint(md) {
			padding-top: 24rem;
		}

		@include breakpoint(xl) {
			padding-top: 28rem;
		}
	}

	.has-nav-secondary & {

		@include breakpoint(md) {
			padding-top: 26rem;
		}

		@include breakpoint(xl) {
			padding-top: 30rem;
		}
	}

	.has-before-header.has-nav-secondary & {

		@include breakpoint(md) {
			padding-top: 30rem;
		}

		@include breakpoint(xl) {
			padding-top: 34rem;
		}
	}

	.blog &,
	.archive &,
	.search-results & {

		@include breakpoint(sm) {
			padding-bottom: 10rem;
		}

		@include breakpoint(md) {
			padding-bottom: 10rem;
		}

		@include breakpoint(xl) {
			padding-bottom: 14rem;
		}
	}

	.wrap {
		position: relative;
		z-index: 2;

		@include breakpoint(sm) {
			max-width: map-get($breakpoints, md);
		}
	}

	h1 {
		width: 100%;
		margin: 0 auto;
		color: $white;
		text-align: center;
	}

	p {
		width: 100%;
		max-width: map_get($breakpoints, xs);
		margin: 0.5em auto 0;
		color: $white;
		text-align: center;
	}
}

/* ## Custom Header
--------------------------------------------- */

.wp-custom-header {
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: auto;
	pointer-events: none;
	object-fit: cover;
	object-position: center;

	.woocommerce & img,
	img,
	video,
	iframe {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
	}

	iframe {
		position: absolute;
		top: -20%;
		right: -20%;
		bottom: -20%;
		left: -20%;
		width: 140%;
		min-width: 100%;
		max-width: 140%;
		height: 140%;
		min-height: 56.25vw; // 16:9 aspect ratio.
		max-height: none;
		margin: auto;
	}

	img {
		display: none;
	}
}

.wp-custom-header-video-button {
	display: none;
}