MAINHACK

Viewing / Editing File: header.scss

/* Header Main */
#ct-header-wrap {
	position: relative;
	z-index: 999;
	.ct-header-topbar1 {
		background-color: #292929;
		padding: 11px 0;
		font-size: 14px;
		color: #dbdbdb;
		@include font-family-heading($heading_default_font);
		@media #{$max-sm} {
			display: none;
		}
		a {
			color: inherit;
			&:hover {
				color: $secondary_color;
			}
		}
		.row {
			align-items: center;
		}
		.ct-header-welcome {
			margin-right: 30px;
			flex-grow: 1;
			margin: 0 15px;
			cite {
				font-weight: 700;
				font-style: normal;
				color: $primary_color;
			}
		}
		.ct-header-top-info {
			list-style: none;
			margin-bottom: 0;
			display: flex;
			margin: 0 15px;
			i {
				color: $secondary_color;
				margin-right: 5px;
			}
			li {
				+ li {
					margin-left: 35px;
				}
			}
		}
	}
	.ct-header-topbar2 {
		padding: 17px 0;
		@media #{$max-lg} {
			display: none;
		}
	}
	.ct-header-topbar3 {
		border-bottom: 1px solid #e4e4e4;
		font-family: "Nunito Sans";
		@media #{$max-md} {
			display: none;
		}
		.ct-header-welcome {
			border-left: 1px solid #e4e4e4;
			border-right: 1px solid #e4e4e4;
			font-size: 14px;
			color: #3d3d3d;
			padding: 7px 19px;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}
		.ct-header-gap {
			flex-grow: 1;
		}
		.ct-header-top-info {
			padding-left: 40px;
			padding-right: 60px;
			border-left: 1px solid #e4e4e4;
			padding-top: 7px;
			padding-bottom: 7px;
			position: relative;
			z-index: 1001;
			@media #{$max-xl} {
				padding-right: 0;
			}
			a {
				font-size: 14px;
				color: #3d3d3d;
				span {
					font-weight: 700;
					border-bottom: 1px solid #6d6d6d;
					display: inline-block;
					line-height: 1;
				}
				&:hover {
					color: $gradient_color_from4;
					span {
						border-color: $gradient_color_from4;
					}
				}
			}
		}
		.row {
			align-items: inherit;
			padding: 0 15px;
		}
	}
	.item-menu-hide-icon .ct-main-menu .link-icon {
		display: none;
	}
	&.scroll-to-bottom {
		#ct-header.h-fixed {
			@include animation(0.95s ease 0s normal forwards 1 running headerSlideDown);
			background-color: #fff;
			@include box-shadow(0 3px 6px rgba(0,0,0,0.05));
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			.ct-header-branding {
				margin-top: 10px;
				margin-bottom: 10px;
				.logo-light {
					opacity: 0;
				}
				.logo-dark {
					opacity: 1;
				}
			}
		}
		&.ct-header-layout4.dark #ct-header.h-fixed {
			background-color: #000;
		}
	}
	&.scroll-to-top.is-sticky {
		#ct-header {
			&.scroll-up {
				@include animation(0.95s ease 0s normal forwards 1 running headerSlideDown);
				background-color: #fff;
				@include box-shadow(0 3px 6px rgba(0,0,0,0.05));
				position: fixed;
				left: 0;
				top: 0;
				right: 0;
				margin-top: -150px;
				.ct-header-branding {
					margin-top: 10px;
					margin-bottom: 10px;
					.logo-light {
						opacity: 0;
					}
					.logo-dark {
						opacity: 1;
					}
				}
			}
		}
	}
	.row {
		align-items: center;
	}
	.ct-header-branding {
		margin: 15px;
		position: relative;
		flex-grow: 1;
		opacity: 1;
		img {
			max-height: 62px;
			max-width: inherit;
			@include transition(all 300ms linear 0ms);
		}
		.logo-light, .logo-mobile {
			position: absolute;
			top: 50%;
			left: 0%;
			@include transform(translate(0%, -50%));
			opacity: 0;
		}
	}
	#ct-header {
		@include transition(all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) 0s);
	}
	.ct-header-search {
		min-width: 230px;
		@media #{$max-lg} {
			display: none;
		}
		form {
			max-width: 230px;
			position: relative;
		}
		.search-field {
			padding: 0;
			border: none;
			font-size: 15px;
			color: #777;
			font-style: italic;
		}
		.search-submit {
			padding: 0;
			border: none;
			background-color: transparent;
			height: 50px;
			width: 50px;
			min-width: 50px;
			color: #0d0d0d;
			position: absolute;
			top: 0;
			right: 0;
			&:hover, &:focus {
				color: $gradient_color_from;
			}
		}
	}
	.ct-header-info {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		.item-icon {
			line-height: 1;
			margin-right: 14px;
			-webkit-animation-duration: 1s;
			animation-duration: 1s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
			-webkit-animation-timing-function: ease-in-out;
			animation-timing-function: ease-in-out;
			animation-iteration-count: infinite;
			-webkit-animation-iteration-count: infinite;
			i {
				font-size: 30px;
				@extend .text-gradient;
				@include background-horizontal($gradient_color_to, $gradient_color_from);
			}
		}
		label {
			font-size: 15px;
			font-weight: 700;
			color: #000000;
			margin-bottom: 4px;
		}
		span {
			font-size: 15px;
			color: #3b3a3a;
			display: block;
		}
		.item-meta {
			position: relative;
			line-height: normal;
			.item-link {
				position: absolute;
				z-index: 99;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}
		.ct-header-info-item {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			+ .ct-header-info-item {
				margin-left: 55px;
			}
			&:hover .item-icon {
				animation-name: icon-bounce;
                -moz-animation-name: icon-bounce;
			}
		}
	}
	.ct-header-info-mobile {
		margin-top: 32px;
		.ct-header-info-item + .ct-header-info-item {
			margin-left: 0;
			margin-top: 20px;
		}
	}
	.ct-header-social {
		display: flex;
		position: relative;
		padding-left: 36px;
		margin-left: 43px;
		margin-right: 15px;
		&:before {
			content: '';
			width: 1px;
			height: 39px;
			background-color: #dfdfdf;
			position: absolute;
			left: 0;
			top: 50%;
			@include transform(translate(0, -50%));
		}
		a {
			width: 34px;
			height: 34px;
			min-width: 34px;
			line-height: 34px;
			text-align: center;
			position: relative;
			font-size: 14px;
			color: #fff;
			z-index: 1;
			&:before, &:after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				@include transition(.3s cubic-bezier(.24,.74,.58,1));
				@include border-radius(100%);
				z-index: -1;
			}
			&:before {
				@include background-horizontal($gradient_color_to, $gradient_color_from);
			}
			&:after {
				@include background-horizontal($gradient_color_to2, $gradient_color_from2);
				opacity: 0;
			}
			&:hover {
				color: #151515;
				&:before {
					opacity: 0;
				}
				&:after {
					opacity: 1;
				}
			}
			+ a {
				margin-left: 9px;
			}
		}
	}
	.ct-header-social-mobile .ct-header-social {
		margin-left: 0;
		padding-left: 0;
		margin-top: 30px;
		&:before {
			display: none;
		}
	}
}

@media #{$min-xl} {
	#ct-header-wrap {
		.ct-header-navigation {
			margin: 0 15px;
			display: flex;
			align-items: center;
		}
		.ct-header-branding img {
			width: auto;
		}
		&.header-trans {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 999;
		}
		&.ct-header-layout1 {
			.ct-header-branding {
				flex-grow: inherit;
				margin: 0 5px 0 15px;
			}
			.ct-header-navigation {
				flex-grow: 1;
				margin-left: 0;
				margin-right: 0;
				position: relative;
				z-index: 1;
				&:before {
					content: '';
					height: 100%;
					position: absolute;
					top: 0;
					right: 20px;
					left: 20px;
					background-color: #0e0e0e;
					z-index: -1;
					transform: skew(26deg);
				}
				&:after {
					content: '';
					height: 100%;
					position: absolute;
					top: 0;
					width: 50%;
					right: 0;
					background-color: #0e0e0e;
					z-index: -1;
				}
			}
			.ct-main-menu > li {
				margin: 0;
				height: 83px;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				position: relative;
				> a {
					text-align: center;
					color: #fff;
					padding: 0 26px;
					line-height: 1;
					position: static;
					span {
						&.link-icon {
							margin: 0 0 7px;
							display: block;
						}
					}
				}
				&:first-child {
					> a {
						padding-left: 70px;
						&:before {
							@include border-radius(0 0 0 5px);
						}
					}
					> .sub-menu {
						margin-left: 40px;
					}
				}
			}
			.ct-header-button {
				.btn {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					line-height: 83px;
					border-radius: 0px;
					height: 83px;
					padding: 0 65px;
					font-size: 16px;
					i:not(.icon-abs) {
						margin-right: 20px;
						font-size: 18px;
					}
				}
			}
			.ct-header-phone {
				line-height: 41px;
				height: 41px;
				background-color: #212121;
				font-size: 16px;
				font-weight: 600;
				color: #ffffff;
				text-align: center;
				padding: 0 10px;
				@include font-family-heading($heading_default_font);
				a {
					color: inherit;
					border-bottom: 1px solid #fff;
					&:hover {
						border-bottom: none;
					}
				}
				label {
					color: $secondary_color;
					font-size: 15px;
				}
				span {
					font-size: 12px;
					font-weight: 400;
				}
				+ .ct-header-button a {
					line-height: 42px;
					height: 42px;
				}
			}
			.ct-header-holder {
				margin-right: 15px;
			}
		}
		&.ct-header-layout2 {
			.ct-header-branding img {
				max-height: 45px;
			}
			.ct-main-menu > li {
				margin: 0 14px;
				> a {
					line-height: 80px;
					&:before {
						height: 5px;
						@include border-radius(2px);
						top: auto;
						bottom: 0px;
						right: auto;
						left: 0;
					}
				}
				&:hover > a,
	            &.current_page_item > a,
	            &.current-menu-item > a,
	            &.current_page_ancestor > a,
	            &.current-menu-ancestor > a {
	                color: $primary_color;
	            }
			}
			.ct-header-button-wrap {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				margin-left: 20px;
				.ct-header-button {
					margin-left: 17px;
					i {
						margin-right: 6px;
						&.icon-abs {
							right: -30px;
						}
					}
					.btn {
						line-height: 48px;
						padding: 0 25px;
						@include box-shadow(0 5px 6px rgba(#000000, 0.17));
					}
				}
			}
		}
		&.ct-header-layout3 {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			#ct-header {
				.ct-main-menu > li {
					> a {
						&:before {
							height: 9px;
							width: 9px;
							@include border-radius(9px);
							position: static;
							display: inline-block;
							margin-right: 10px;
							@include transform(translateX(-10px));
							opacity: 0;
						}
						&:after {
							color: $primary_color;
						}
					}
					&:hover > a,
		            &.current_page_item > a,
		            &.current-menu-item > a,
		            &.current_page_ancestor > a,
		            &.current-menu-ancestor > a {
		                &:before {
		                    @include transform(translateX(0px));
		                    opacity: 1;
		                }
		            }
				}
				&:not(.h-fixed) {
					.ct-header-branding img {
						max-height: 75px;
					}
					.ct-main-menu > li > a {
						line-height: 110px;
					}
				}
			}
			.ct-header-branding {
				flex-grow: inherit;
			}
			.ct-header-navigation {
				flex-grow: 1;
				justify-content: center;
			}
			.ct-header-meta {
				margin: 0 15px;
				.h-btn-sidebar {
					width: 26px;
					height: 19px;
					position: relative;
					overflow: hidden;
					cursor: pointer;
					.ct-menu-line {
						height: 3px;
						position: absolute;
						right: 0;
						&:before, &:after {
							content: '';
							position: absolute;
							height: 100%;
							top: 0;
							left: 0;
							bottom: 0;
							right: 0;
							background: #0d0d0d;
							opacity: 1;
							width: 100%;
						}
						&:before {
							@include transform(translate3d(100%,0,0));
						}
						&:after {
							@include transform(translate3d(0,0,0));
						}
						&.ct-menu-line1 {
							width: 26px;
							top: 0;
						}
						&.ct-menu-line2 {
							width: 20px;
							top: 8px;
						}
						&.ct-menu-line3 {
							width: 13px;
							bottom: 0;
						}
					}
					&:hover .ct-menu-line {
						&.ct-menu-line1 {
							&:before {
								@include transform(translate3d(0,0,0));
								opacity: 1;
								@include transition(transform .8s cubic-bezier(.215,.61,.355,1) 460ms,opacity .8s cubic-bezier(.215,.61,.355,1) 460ms);
							}
							&:after {
								@include transform(translate3d(-26px,0,0));
								opacity: 0;
								@include transition(transform .6s cubic-bezier(.165,.84,.44,1) 0s,opacity .6s cubic-bezier(.165,.84,.44,1) 0s);
							}
						}
						&.ct-menu-line2 {
							&:before {
								@include transform(translate3d(0,0,0));
								opacity: 1;
								@include transition(transform .8s cubic-bezier(.215,.61,.355,1) 620ms,opacity .8s cubic-bezier(.215,.61,.355,1) 620ms);
							}
							&:after {
								@include transform(translate3d(-26px,0,0));
								opacity: 0;
								@include transition(transform .6s cubic-bezier(.165,.84,.44,1) 160ms,opacity .6s cubic-bezier(.165,.84,.44,1) 160ms);
							}
						}
						&.ct-menu-line3 {
							&:before {
								@include transform(translate3d(0,0,0));
								opacity: 1;
								@include transition(transform .8s cubic-bezier(.215,.61,.355,1) 780ms,opacity .8s cubic-bezier(.215,.61,.355,1) 780ms);
							}
							&:after {
								@include transform(translate3d(-26px,0,0));
								opacity: 0;
								@include transition(transform .6s cubic-bezier(.165,.84,.44,1) 320ms,opacity .6s cubic-bezier(.165,.84,.44,1) 320ms);
							}
						}
					}
				}
			}
		}
		&.ct-header-layout4 {
			.ct-header-info-mobile, .ct-header-social-mobile {
				display: none;
			}
			.ct-header-branding {
				img {
					max-height: 32px;
				}
			}
			.ct-main-menu li.megamenu > .sub-menu {
				left: 15px !important;
			}
			#ct-header {
				> .container > .row {
					position: relative;
				}
				.ct-header-navigation {
					flex-grow: 1;
				}
				.ct-main-menu > li {
					&.megamenu {
						position: static;
					}
					> a {
						line-height: 67px;
						&:before {
							background-color: $gradient_color_from;
							height: 2px;
							left: 0;
						}
					}
					&:hover > a,
		            &.current_page_item > a,
		            &.current-menu-item > a,
		            &.current_page_ancestor > a,
		            &.current-menu-ancestor > a {
		            	color: $gradient_color_from;
		            }
				}
				.ct-main-menu .sub-menu li a::before, .ct-main-menu .children li a::before {
					background-color: $gradient_color_from;
				}
				.ct-main-menu .sub-menu li > a:hover, .ct-main-menu .children li > a:hover, .ct-main-menu .sub-menu li.current_page_item > a, .ct-main-menu .children li.current_page_item > a, .ct-main-menu .sub-menu li.current-menu-item > a, .ct-main-menu .children li.current-menu-item > a, .ct-main-menu .sub-menu li.current_page_ancestor > a, .ct-main-menu .children li.current_page_ancestor > a, .ct-main-menu .sub-menu li.current-menu-ancestor > a, .ct-main-menu .children li.current-menu-ancestor > a {
					color: $gradient_color_from;
				}
				&:not(.h-fixed) {
					border-top: 2px solid #dfdfdf;
					.ct-header-branding {
						display: none;
					}
					.ct-main-menu > li {
						margin: 0 27px;
						> a:before {
							top: -2px;
						}
						&:first-child {
							margin-left: 0;
						}
					}
				}
			}
			&.dark {
				background-color: #242424;
				.ct-showcase1 .ct-showcase-meta h3 {
					color: #fff;
				}
				.ct-main-menu li.megamenu .ct-heading .item--title {
					color: #fff;
				}
				.col-line-mega > .elementor-column-wrap::before {
					border-color: rgba(#fff, 0.14);
				}
				.ct-header-search {
					.search-field {
						color: #afafaf;
						background-color: transparent;
					}
					.search-submit {
						color: #fff;
						&:before, &:after {
							display: none;
						}
					}
				}
				#ct-header-topbar {
					background-color: #000000;
				}
				.ct-header-info {
					.item-icon i {
						background-color: $gradient_color_to3;
						background-image: none;
					}
					label, span {
						color: #fff;
					}
				}
				.ct-header-social a {
					&:before {
						background-color: $gradient_color_from3;
						background-image: none;
					}
					&:after {
						background-color: $gradient_color_to3;
						background-image: none;
					}
				}
				.ct-header-branding {
					.logo-dark {
						opacity: 0 !important;
					}
					.logo-light {
						opacity: 1 !important;
					}
				}
				#ct-header {
					background-color: #242424;
					border-color: #3b3a3a;
					.ct-main-menu > li {
						> a {
							color: #fff;
						}
						&:hover > a,
			            &.current_page_item > a,
			            &.current-menu-item > a,
			            &.current_page_ancestor > a,
			            &.current-menu-ancestor > a {
			            	&:before {
			            		background-color: $gradient_color_to3;
			            	}
			            }
					}
					.sub-menu {
						background-color: #242424;
						li {
							a {
								color: #fff;
								&:before {
				            		background-color: $gradient_color_to3;
				            	}
							}
							&:hover > a,
				            &.current_page_item > a,
				            &.current-menu-item > a,
				            &.current_page_ancestor > a,
				            &.current-menu-ancestor > a {
				            	color: $gradient_color_to3;
				            }
						}
					}
				}
			}
		}
		&.ct-header-layout6 {
			position: static;
			z-index: inherit;
			#ct-header {
				position: relative;
				z-index: 1003;
			}
			.ct-header-button {
				margin-left: 27px;
				.btn {
					font-size: 16px;
					font-weight: 600;
					border-radius: 4px;
					padding: 0 24px;
					line-height: 48px;
					display: inline-flex;
					align-items: center;
					i {
						margin-right: 0;
						margin-left: 6px;
						font-size: 20px;
						&:before {
							content: "\f301";
							font-family: Material-Design-Iconic-Font;
						}
					}
				}
			}
			.ct-header-branding img {
				max-height: 34px;
			}
			.ct-main-menu > li {
				margin: 0 27px;
				> a {
					font-size: 16px;
					line-height: 84px;
					&:before {
						width: 0;
						content: '\f0da';
						font-family: "Font Awesome 5 Pro";
						left: -25px;
						right: auto;
						opacity: 0;
					}
				}
				&:hover > a,
	            &.current_page_item > a,
	            &.current-menu-item > a,
	            &.current_page_ancestor > a,
	            &.current-menu-ancestor > a {
	            	color: $gradient_color_from4;
	            	&:before {
	            		opacity: 1;
	            		left: -15px;
	            	}
	            }
	            .sub-menu {
					li {
						a:before {
							background-color: $gradient_color_from4;
						}
						&:hover > a,
			            &.current_page_item > a,
			            &.current-menu-item > a,
			            &.current_page_ancestor > a,
			            &.current-menu-ancestor > a {
			            	color: $gradient_color_from4;
			            }
					}
				}
			}
		}
	}
}

@media #{$max-lg} {
	#ct-header-wrap {
		position: relative;
		@include box-shadow(0 0px 5px rgba(0, 0, 0, 0.15));
		background-color: #fff;
		&.fixed-height {
			height: inherit !important;
		}
		.ct-header-holder, .ct-header-button-wrap {
			display: none;
		}
		.ct-header-main {
			position: relative;
		}
		.ct-header-meta {
			display: none;
		}
		.ct-header-branding {
			margin: 15px;
			min-height: 50px;
			align-items: center;
			display: flex;
			img {
				max-height: 44px;
				width: auto;
			}
	    	a {
	    		&.logo-mobile {
	    			opacity: 1;
	    			position: static;
	    		}
	    		&.logo-dark, &.logo-light {
	    			display: none;
	    		}
	    	}
		}
		#ct-menu-mobile {
			position: absolute;
			top: 50%;
			right: 15px;
			@include transform(translate(0,-50%));
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}
		&.ct-header-layout2 .ct-header-branding img {
			max-height: 45px;
		}
		&.ct-header-layout4 {
			.ct-header-branding img {
				max-height: 32px;
			}
			&.dark {
				background-color: #000000;
				.ct-showcase1 .ct-showcase-meta h3 {
					color: #fff;
				}
				#ct-menu-mobile .btn-nav-mobile {
					&:before, &:after, span {
						background-color: #fff;
					}
				}
				.ct-main-menu li.megamenu .ct-heading .item--title {
					color: #fff;
				}
				.ct-header-navigation .ct-main-navigation {
					background-color: #242424;
					.ct-main-menu li {
						a {
							color: #fff;
							border-color: rgba(#fff, 0.15);
						}
						&:hover > a,
			            &.current_page_item > a,
			            &.current-menu-item > a,
			            &.current_page_ancestor > a,
			            &.current-menu-ancestor > a {
			            	color: $gradient_color_to3;
			            }
					}
					.ct-menu-toggle {
						border-color: #444;
						background-color: #444;
						color: #fff;
					}
					li > .sub-menu {
						border-color: rgba(#fff, 0.15);
					}
				}
				.ct-header-info-mobile {
					i {
						background-color: $gradient_color_to3 !important;
						background-image: none;
						font-size: 24px;
					}
					label, span {
						color: #fff;
					}
				}
				.ct-header-social a {
					&:before {
						background-color: $gradient_color_from3;
						background-image: none;
					}
					&:after {
						background-color: $gradient_color_to3;
						background-image: none;
					}
				}
			}
		}
		&.ct-header-layout6 {
			z-index: 1005;
			.ct-header-branding img {
				max-height: 34px;
			}
			.ct-main-menu > li {
				&:hover > a,
	            &.current_page_item > a,
	            &.current-menu-item > a,
	            &.current_page_ancestor > a,
	            &.current-menu-ancestor > a {
	            	color: $gradient_color_from4;
	            }
	            .sub-menu > li {
	            	&:hover > a,
		            &.current_page_item > a,
		            &.current-menu-item > a,
		            &.current_page_ancestor > a,
		            &.current-menu-ancestor > a {
		            	color: $gradient_color_from4;
		            }
	            }
	        }
		}
	}
}

.ct-search-popup1 {
	width: 40px;
	height: 40px;
	position: relative;
	text-align: center;
	cursor: pointer;
	* {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	i {
		font-size: 24px;
	}
	svg {
		height: 24px;
	}
}

.admin-bar #ct-header-wrap #ct-header.h-fixed {
	top: 32px;
	@media screen and (max-width: 782px) {
		top: 46px;
	}
	@media screen and (max-width: 600px) {
		top: 0;
	}
}

.elementor-widget.h6-image-header {
	max-width: 507px;
	position: absolute;
	top: -130px;
	right: -10px;
	z-index: 999;
	@media #{$max-xxx} {
		max-width: 300px;
		right: 0;
		top: 0;
	}
	@media #{$max-xl} {
		max-width: 220px;
	}
	@media #{$max-lg} {
		display: none;
	}
}
/* End Header Main */

body.rtl {
	@media #{$max-lg} {
		li.megamenu > .sub-menu {
			right: 0 !important;
		}
		.ct-header-mobile #ct-menu-mobile {
			right: auto;
			left: 15px;
		}
	}
}

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: header.scss

Server Info

System Features

User Info