Edit File - File Manager

Edit File: header-slide-down.css

/*
HEADER SLIDE DOWN
================================================ */
body.fixed-header.page-loaded #pagewrap {
	padding-top: 0 !important;
}
body.fixed-header.page-loaded #headerwrap.fixed-header,
body.fixed-header.page-loaded #headerwrap {
	position: relative;
	transition: 1s;
}

/* transparent header */
body.fixed-header.page-loaded.transparent-header #body {
	margin-top: -65px;
}

/* header */
#header {
	text-align: inherit;
	padding: 0;
	display: -ms-flexbox;
	display: flex;
	flex-flow: row wrap;
	width: 100%;
	max-width: none;
	z-index: auto;
}
.header-bar {
	margin-left: 2%;
}

/* site logo */
#site-logo {
	margin: 15px 10px 15px 0;
	display: inline-block;
	vertical-align: middle;
}
#site-logo,
#site-logo a {
	transition: none;
}

/* site description */
#site-description {
	display: inline-block;
	margin: 10px 0;
	vertical-align: middle;
}

/* menu icon */
#headerwrap .header-icons {
	position: absolute;
	top: 26px;
	right: 2%;
	text-decoration: none;
	color: inherit;
	z-index: 2 !important;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	flex-direction: row;
}
.mobile-menu-visible #headerwrap .header-icons {
	top: auto;
	bottom: 5px;
}
#menu-icon {
	order: 1;
	outline: none;
}
.mobile-menu-visible .menu-icon-inner {
	border: none;
	transform-origin: center;
	width: 1.35em;
	height: 1.35em;
}
.mobile-menu-visible .menu-icon-inner:before {
	transform: rotateZ(-45deg);
	top: 50%;
}
.mobile-menu-visible .menu-icon-inner:after {
	transform: rotateZ(45deg);
	top: 50%;
}

.mobile_menu_active.slide-cart #cart-icon,
#cart-icon {
	margin-left: 0;
	margin-right: .9em;
}

/* Slide Menu Styles */
.mobile_menu_active #mobile-menu.sidemenu,
.mobile-menu-visible #mobile-menu.sidemenu,
#mobile-menu.sidemenu {
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	order: -1;
	width: 100%;
	position: static;
	background-color: #5a408e;
	color: #fff;
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	transition: all .25s linear;
}
.mobile_menu_active.mobile-menu-visible #mobile-menu.sidemenu,
.mobile-menu-visible #mobile-menu.sidemenu {
	max-height: 500px;
	opacity: 1;
	visibility: visible;
	padding: 1em 0;
}
.mobile_menu_active #mobile-menu.sidemenu {
	padding: 0;
}
.mobile_menu_active.mobile-menu-visible #mobile-menu.sidemenu {
	padding: 2em 0 0;
}

/* main navigation */
.navbar-wrapper {
	text-align: center;
}
#main-nav {
	font-size: 1.1em;
}
#main-nav .mega-menu-posts .post,
#main-nav .mega-menu-posts .post-title {
	text-align: left;
}

/* header widget */
.header-widget {
	order: -1;
}

/* body overlay */
.mobile-menu-visible .body-overlay,
.body-overlay.body-overlay-on {
	display: none;
}
.slide-cart-visible .body-overlay.body-overlay-on {
	display: block;
}
body.mobile-menu-visible {
	overflow-y: visible;
}

/* fixed header */
#headerwrap.fixed-header .header-bar {
	display: block;
}

/* Mobile Menu Active Styles */
body:not(.header-overlay):not(.header-minbar):not(.header-leftpane):not(.header-rightpane).mobile-menu-visible.mobile_menu_active.sidemenu-right,
body:not(.header-overlay):not(.header-minbar):not(.header-leftpane):not(.header-rightpane).mobile-menu-visible.mobile_menu_active.sidemenu-right #headerwrap.fixed-header,
body:not(.header-overlay):not(.header-minbar):not(.header-leftpane):not(.header-rightpane).mobile-menu-visible.mobile_menu_active.sidemenu-left,
body:not(.header-overlay):not(.header-minbar):not(.header-leftpane):not(.header-rightpane).mobile-menu-visible.mobile_menu_active.sidemenu-left #headerwrap.fixed-header {
	left: 0;
}
.mobile_menu_active #header {
	padding: 0;
}
.mobile_menu_active .navbar-wrapper {
	text-align: left;
}
.mobile_menu_active #site-logo {
	margin: 15px 10px 15px 0;
}
.mobile_menu_active #site-description {
	margin: 10px 0;
}
.mobile_menu_active #menu-icon-close {
	display: none;
}

/* Media queries */
@media screen and (min-width: 1261px) {
	.navbar-wrapper,
	.header-widget {
		width: 100%;
		max-width: 1160px;
		margin: auto;
	}
}
@media screen and (max-width: 1260px) {
	.mobile_menu_active .header-widget,
	.header-widget,
	.navbar-wrapper {
		width: 100%;
		max-width: 96%;
		margin: auto;
	}
}
@media screen and (max-width: 680px) {
	.header-bar {
		margin-left: 5%;
	}
	#headerwrap .header-icons {
		right: 5%;
		min-width: auto;
	}
	.mobile_menu_active .header-widget,
	.header-widget,
	.navbar-wrapper {
		max-width: 90%;
	}
}

Back to File Manager