File: /home/slfopp7cb1df/public_html/home/wp-content/themes/nanosoft/assets/less/_header_position.less
.admin-bar {
.header-position-left,
.header-position-right {
.site-header.site-header-classic {
top: 32px;
}
}
}
/*.header-position-right {
padding-right: 250px;
.site-header {
position: fixed;
top: 0;
bottom: 0;
right: 0;
width: 250px;
&.header-transparent {
position: fixed;
bottom: 0;
right: 0;
left: auto;
}
.wrap {
width: 100%;
max-width: 100%;
}
&.header-brand-left {
.header-brand {
float: none;
}
}
&.header-brand-center {
.header-brand {
position: static;
text-align: center;
top: auto;
left: auto;
-webkit-transform: translateX(0) translateY(0);
-moz-transform: translateX(0) translateY(0);
-ms-transform: translateX(0) translateY(0);
-o-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
.navigator {
> .menu > li > a {
text-align: center;
}
}
}
&.header-brand-right {
.header-brand {
float: none;
text-align: right;
}
.navigator {
> .menu > li > a {
text-align: right;
}
}
}
.navigator {
.menu {
&.menu-primary,&.menu-secondary {
float: none;
li {
margin: 0;
}
}
li {
float: none;
&:extend(.transition);
.sub-menu {
right: 100%;
left: auto;
top: 0;
text-align: right;
li {
.sub-menu {
left: auto;
right: 100%;
}
}
}
a {
&:after {
z-index: -1;
height: 100%;
}
}
}
}
}
}
}
.header-position-bottom {
.site-header {
position: fixed;
bottom: 0;
left: 0;
right: 0;
.navigator {
.menu {
li {
.sub-menu {
top: auto;
bottom: 100%;
li {
.sub-menu {
top: auto;
bottom: -30px;
}
}
}
a {
&:after {
bottom: auto;
top: 0;
}
}
}
}
}
}
}*/
.header-position-left {
padding-left: 50px;
.site-header {
&.header-shadow {
.box-shadow;
}
&.site-header-classic {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 50px;
z-index: 1000;
white-space: nowrap;
.transition(width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) 0s);
.navigator {
position: static;
width: 100%;
padding: 0;
.menu-primary {
flex-direction: column;
> li {
&.menu-item-has-children {
.menu-item-toggle {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
}
&.menu-item-expand {
position: static;
> .sub-menu {
display: block;
}
> a {
&:after {
.opacity(1);
}
}
.menu-item-toggle {
position: fixed;
background: @dark;
left: 500px;
cursor: sw-resize;
z-index: -1;
.opacity(.7);
}
}
> a {
position: relative;
&:after {
content: "\f10a";
font-family: "Ionicons";
flex-grow: 1;
text-align: right;
font-size: 14px;
margin-right: 5px;
.opacity(.3);
}
}
}
}
li,.click,.mega {
a {
display: block;
}
.sub-menu {
padding: 80px;
width: 450px;
border: none;
left: 100%;
top: 50%;
background: none;
display: none;
visibility: visible;
.opacity(1);
.box-shadow(none);
-webkit-transform: translateX(0) translateY(-50%);
transform: translateX(0) translateY(-50%);
&:before {
content: "";
position: absolute;
left: 0;
width: 100%;
top: -200%;
bottom: -200%;
//z-index: -1;
background: @dark;
}
&:after {
content: "";
position: absolute;
left: auto;
right: 0;
width: 50px;
top: -200%;
bottom: -200%;
z-index: -2;
background: @dark;
height: auto;
border: none;
.box-shadow(0 0px 50px rgba(0,0,0,.5));
-webkit-transform: none;
transform: none;
}
li {
margin: 0 0 30px 0;
> a {
font-size: 30px;
padding: 0;
line-height: 150%;
display: flex;
flex-direction: row;
align-items: center;
i,img {
position: relative;
top: -2px;
width: 48px;
text-align: center;
margin-right: 20px;
flex-shrink: 0;
font-size: 48px;
}
}
&:hover {
> a {
color: @white;
}
}
}
}
&:before {
display: none;
}
}
}
&:after {
display: none;
}
}
&.header-brand-left {
.header-content {
flex-direction: column;
align-items: baseline;
.header-brand {
width: 30px;
overflow: hidden;
flex-shrink: 0;
.transition(width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) 0s);
a {
display: block;
}
img {
max-width: 200px;
}
}
.navigator {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
.nav-info {
font-size: 13px;
line-height: 135%;
text-align: inherit;
padding: 20px 10px 0 10px;
margin-top: 10px;
width: 200px;
white-space: normal;
transform: translateX(-200px);
.transition(0.5s cubic-bezier(0.25, 0.8, 0.25, 1) 0s);
&:before {
bottom: auto;
top: 0;
left: 10px;
right: 10px;
}
}
.menu-primary {
> li {
> a {
display: flex;
align-items: center;
overflow: hidden;
i {
width: 30px;
height: auto;
flex-shrink: 0;
text-align: center;
margin: 0 15px 0 0;
font-size: 28px;
}
}
}
}
}
.extras {
display: flex;
flex-direction: column;
padding: 10px;
width: 200px;
height: auto;
align-items: baseline;
transform: translateX(-200px);
white-space: normal;
.transition(0.5s cubic-bezier(0.25, 0.8, 0.25, 1) 0s);
.header-info-text {
display: block;
width: 180px;
margin: 0;
font-size: 13px;
line-height: 135%;
order: 3;
}
.social-icons {
display: block;
padding: 0 0 15px 0;
margin: 0 0 20px 0;
order: 2;
text-align: inherit;
border-bottom: 1px solid rgba(255,255,255,.1);
i {
display: none;
}
a {
margin: 0;
padding: 0 10px 0 0;
font-size: 13px;
line-height: 150%;
width: auto;
height: auto;
float: left;
width: 50%;
display: inline-block;
&:before {
content: attr(data-tooltip);
}
&:nth-child(2n) {
padding: 0;
}
}
}
}
.menu-extras {
display: block;
margin: 0 0 30px 0;
order: 1;
.search-box {
padding: 0;
> a {
display: none;
}
.widget_search {
position: static;
-webkit-transform: none;
transform: none;
width: 180px;
visibility: visible;
.opacity(1);
.search-field {
background: @white;
border: none;
height: 40px;
line-height: 40px;
padding: 0 10px;
}
.search-form {
.search-submit {
right: 10px;
.opacity(.5);
&:hover {
.opacity(.7);
}
}
}
}
}
.shopping-cart {
display: none;
}
}
}
&:hover {
width: 200px;
.header-content {
.header-brand {
width: 180px;
}
.extras {
transform: translateX(0);
.delay(240ms);
.duration(550ms);
}
.navigator {
.nav-info {
transform: translateX(0);
}
}
}
}
}
}
&.header-brand-center {
.header-content {
flex-direction: column;
align-items: center;
}
.header-brand {
position: relative;
left: 0;
z-index: 4;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.navigator {
flex-grow: 1;
flex-basis: 0;
.menu-primary {
> li {
text-align: center;
> a {
&:before {
display: none;
}
}
}
}
}
}
.wrap {
width: 100%;
max-width: 100%;
padding: 0;
position: static;
}
.header-content {
height: 100%;
}
}
}