File: /home/frenchy/www/extracts/var/www/french-american.org/repo/app/assets/scss/polo/_header.scss
/* ----------------------------------------------------------------
Header
----------------------------------------------------------------- */
#header {
position: relative;
z-index: 199 !important;
width: 100%;
height: 80px;
line-height: 80px;
}
#header .container {
position: relative;
}
#header .header-inner,
#header #header-wrap {
right: 0;
left: 0;
height: 80px;
background-color: #fff;
// transition: all .4s ease-in-out;
-webkit-backface-visibility: hidden;
/* logo */
}
#header .header-inner #logo,
#header #header-wrap #logo {
position: relative;
z-index: 1;
float: left;
height: 80px;
font-size: 28px;
transition: all .4s ease-in-out;
}
#header .header-inner #logo a > img,
#header #header-wrap #logo a > img {
width: auto;
// height: 80px;
height: 60px;
margin-top: 10px;
vertical-align: inherit;
transition: all .4s ease-in-out;
}
#header.header-sticky .header-inner,
#header.header-sticky #header-wrap {
position: fixed;
top: -140px;
background-color: #fff !important;
box-shadow: 0 12px 6px rgba(0, 0, 0, .06);
transition: top .8s ease-in-out;
}
#header.header-sticky .header-inner #logo,
#header.header-sticky #header-wrap #logo {
font-size: 20px;
}
#header.header-sticky.sticky-active .header-inner,
#header.header-sticky.sticky-active #header-wrap {
top: 0;
}
#header.header-sticky.dark .header-inner,
#header.header-sticky.dark #header-wrap {
background-color: #1f1f1f !important;
}
#header.dark {
/* Main Menu */
}
#header.dark .header-inner,
#header.dark #header-wrap {
background-color: #1f1f1f;
}
#header.dark .header-inner .lines,
#header.dark .header-inner .lines::before,
#header.dark .header-inner .lines::after,
#header.dark #header-wrap .lines,
#header.dark #header-wrap .lines::before,
#header.dark #header-wrap .lines::after {
background-color: #fff;
}
#header.dark #mainMenu nav > ul > li::before {
color: #bbb;
}
#header.dark #mainMenu nav > ul > li > a {
color: #fff;
}
#header.dark #mainMenu nav > ul > li > a .menu-sub-title {
color: #eee;
}
#header.dark #mainMenu nav > ul > li.current > a::after,
#header.dark #mainMenu nav > ul > li:hover > a::after,
#header.dark #mainMenu nav > ul > li:focus > a::after {
background-color: #fff;
}
#header.dark .header-extras i {
color: #fff;
}
#header.dark .header-extras .lines,
#header.dark .header-extras .lines::before,
#header.dark .header-extras .lines::after {
background-color: #fff;
}
#header[data-transparent="true"] .header-inner,
#header[data-transparent="true"] #header-wrap,
#header[data-transparent="true"].dark .header-inner,
#header[data-transparent="true"].dark #header-wrap {
background-color: transparent;
}
#header[data-transparent="true"] + #slider,
#header[data-transparent="true"] + .fullscreen,
#header[data-transparent="true"] + .halfscreen,
#header[data-transparent="true"] + #google-map {
top: -80px;
margin-bottom: -80px;
}
#header[data-fullwidth="true"] .header-inner .container,
#header[data-fullwidth="true"] #header-wrap .container {
max-width: 100%;
padding: 0 30px;
}
#header.header-modern:not(.header-active) {
width: 1200px;
margin: 40px auto 0;
}
#header.header-modern:not(.header-active) + #slider,
#header.header-modern:not(.header-active) + .fullscreen,
#header.header-modern:not(.header-active) + .halfscreen,
#header.header-modern:not(.header-active) + #google-map {
top: -130px;
margin-bottom: -130px;
}
#header.header-modern:not(.header-active) .header-inner,
#header.header-modern:not(.header-active) #header-wrap {
background-color: #fff;
border-radius: 4px;
}
#header.header-modern:not(.header-active).dark .header-inner,
#header.header-modern:not(.header-active).dark #header-wrap {
background-color: #1f1f1f;
}
#header.header-modern:not(.header-active)[data-transparent="true"] .header-inner,
#header.header-modern:not(.header-active)[data-transparent="true"] #header-wrap {
background-color: transparent;
}
#header.header-modern:not(.header-active).header-colored .header-inner,
#header.header-modern:not(.header-active).header-colored #header-wrap {
background-color: #2250fc;
}
#header.header-colored .header-inner,
#header.header-colored #header-wrap {
background-color: #2250fc;
}
#header.header-mini {
height: 60px;
line-height: 60px;
}
#header.header-mini .header-inner,
#header.header-mini #header-wrap {
height: 60px;
}
#header.header-mini .header-inner #mainMenu > .container nav > ul > li > a,
#header.header-mini #header-wrap #mainMenu > .container nav > ul > li > a {
font-size: 11px;
}
#header.header-mini .header-inner #mainMenu > .container nav > ul > li .dropdown-submenu::before,
#header.header-mini #header-wrap #mainMenu > .container nav > ul > li .dropdown-submenu::before {
top: -6px;
}
#header.header-mini .header-inner #logo,
#header.header-mini #header-wrap #logo {
height: 60px;
}
#header.header-mini .header-inner #logo a > img,
#header.header-mini #header-wrap #logo a > img {
/* width: 100%; */
height: 60px;
}
#header.header-mini .header-inner #mainMenu-trigger,
#header.header-mini #header-wrap #mainMenu-trigger {
height: 60px;
}
#header.header-mini .header-inner .header-extras,
#header.header-mini #header-wrap .header-extras {
height: 60px;
}
#header.header-logo-right .header-inner #logo,
#header.header-logo-right #header-wrap #logo {
float: right;
}
#header.header-logo-right .header-inner .header-extras,
#header.header-logo-right #header-wrap .header-extras {
float: left;
/* ul>li:first-child {
margin-left: 0px;
} */
}
#header.header-logo-right .header-inner #mainMenu nav,
#header.header-logo-right #header-wrap #mainMenu nav {
float: left;
}
#header.header-always-fixed .header-inner,
#header.header-always-fixed #header-wrap {
position: fixed !important;
top: 0 !important;
background-color: #fff;
box-shadow: 0 12px 6px rgba(0, 0, 0, .06);
}
#header.header-plain .header-inner,
#header.header-plain #header-wrap {
background-color: transparent;
border: 0 !important;
box-shadow: none;
}
#header.header-shadow .header-inner,
#header.header-shadow #header-wrap {
box-shadow: 0 0 18px 0 rgba(0, 0, 0, .12) !important;
}
#header #mainMenu-trigger {
position: absolute;
z-index: 1;
float: right;
width: 26px;
height: 80px;
visibility: hidden;
opacity: 0;
}
#header #mainMenu-trigger button {
padding: 0;
background: none;
border: 0;
}
#header #mainMenu-trigger button:focus {
outline: 0;
}
#header #mainMenu-trigger button i {
font-size: 17px;
}
@media (min-width: 1320px) {
#header:not(.header-sticky) {
height: 120px;
line-height: 120px;
}
#header:not(.header-sticky) .header-inner #logo,
#header:not(.header-sticky) #header-wrap #logo {
margin-top: rem(10px);
}
#header:not(.header-sticky) .header-inner #logo a > img,
#header:not(.header-sticky) #header-wrap #logo a > img {
height: 80px;
}
}