@logoLink : '/assets/site/img/header/jamestown-logo-white.webp';
@logoWidth : 264px;
@logoTopPadding : 74px;
@logoWidthFooter : 200px;
@logoTopPaddingFooter : 74px;
@headerHeightDesktop : 105px;
@headerHeightMobile : 90px;
@backgroundColorHeaderTop : @brandColor1;
@backgroundColorHeader : #fff;
@fontColorTopHeader : #fff;
@fontColorHeaders : #000;
@fontColorHeader : #ccc;
@linkColorHeader : #08c;
@linkColorHoverHeader : #f16337;
@linkDecorationHeader : none;
@linkDecorationHoverHeader : underline;
@searchBackground : transparent;
@searchButtonBackground : transparent;
@searchButtonBorder : 1px solid #ccc;
@searchButtonColor : #333;
@navMenuBackground : transparent;
@iconCartColor : red;
@iconSizeCartMobile : 30px;
@backgroundResponsiveNav : #fff;
@responsiveNavLinkColor : #000;
@responsiveUserMenuNavFontSize : 15px;
@hamburgerMenuColor : #000;
.transition2(@duration: 0.3s, @ease: ease) {
-webkit-transition: all @duration @ease;
-moz-transition : all @duration @ease;
transition : all @duration @ease;
}
#page-header {
//background : @backgroundColorHeader;
//border-bottom: @border;
}
.header-outer-wrapper {
text-align: center;
.header-inner-wrapper {
width : 100%;
max-width : 1640px;
margin : 140px auto;
text-align: center;
}
}
.logo-nav-wrapper-inner {
width : 100%;
max-width : 1640px;
margin : 140px auto;
text-align: center;
}
.page-header-wrapper {
z-index: 999;
.logo-nav-wrapper {
border-bottom: 2px solid @brandColor1;
height : @headerHeightDesktop;
background : #fff;
grid-area : logo-nav-wrapper;
padding : 0 20px;
}
.logo-nav-wrapper-inner {
max-width : 1640px;
margin : 0 auto;
display : grid;
grid-template-columns: 1fr 321px 1fr;
grid-template-areas :
"nav-left-header nav-logo nav-right-header";
}
ul {
li,
a {
color : #000;
display : inline-block;
padding-right: 2vw;
}
}
.nav-left-header {
grid-area: nav-left-header;
}
.nav-right-header {
grid-area: nav-right-header;
}
.logo-header {
grid-area: nav-logo;
}
.top-message {
grid-area: message;
}
.header-container {
display : flex;
flex-direction : column;
align-items : center;
justify-content: center;
i {
height: 14px;
.fs(12);
width: 12px;
}
i.rotate {
transform: rotate(180deg);
}
}
.nav-left-header {
display : grid;
grid-template-columns: 1fr;
height : @headerHeightDesktop;
background : #fff;
border-bottom : 2px solid @brandColor1;
.col-fill {
height: 105px;
}
.header-container {
align-items: start;
}
li {
a {
text-decoration: none;
}
}
}
.nav-right-header {
display : grid;
grid-template-columns: 1fr 230px;
gap : 20px;
z-index : 9999;
height : @headerHeightDesktop;
background : #fff;
border-bottom : 2px solid @brandColor1;
.nav-category-no-link {
cursor: pointer;
}
.header-container {
align-items : end;
padding-left: 20px;
li {
padding-right: 0;
a {
padding-right : 15px;
text-transform: none;
&:hover {
text-decoration: none;
}
}
}
}
a,
span {
font-size: clamp(15px, 1.5vw, 20px);
color : @brandColor1;
}
.col-fill {
height: 105px;
}
ul {
margin: 0;
}
#page-header-menu {
display : flex;
justify-content: right;
align-items : center;
}
}
#user-menu {
>ul {
display : grid;
grid-template-columns: repeat(4, 1fr);
margin : 0;
li {
padding: 0;
a {
padding: 0;
}
}
.sign-in a {
.fs(18);
color: @brandColor1;
}
}
}
}
.top-message {
z-index : 999999999;
background: @brandColor1;
position : relative;
}
.menu-products-wrapper {
height : 500px;
position : absolute;
top : -800px;
background : rgba(255, 255, 255, 0.8);
backdrop-filter : blur(15px);
-webkit-backdrop-filter: blur(15px);
z-index : 9999999;
width : 100%;
transition : all 2s ease;
}
.menu-products-wrapper.show {
top: 150px;
}
//menu dropdown
//-----------------------------------------------------------------------------------------------
.menu {
display: flex;
margin : 0;
padding: 0;
>li {
a,
span {
font-size : clamp(16px, 1.8vw, 24px);
//.fs(24);
color : @brandColor1;
text-transform: uppercase;
font-family : @baseFontHeader;
display : flex;
cursor : pointer;
}
i {
.fs(12);
margin-left: 6px;
}
}
}
.mega-menu {
justify-content: space-between;
position : absolute;
left : 0;
top : -800px;
width : 100%;
border-bottom : 1px solid @brandColor1;
z-index : -999;
transition : all .5s;
overflow : hidden;
h2 {
.fs(24);
font-weight : 900;
text-transform: uppercase;
}
span {
.fs(12);
}
ul {
margin: 0;
}
.col-inner {
width : 100%;
max-width: 160px;
margin : 0 auto;
}
.mega-grid {
display : grid;
grid-template-columns: 390px 1fr;
}
.mega-menu-inner {
width : 100%;
max-width : 100%;
margin : 0 auto;
padding : 15px 30px 20px 30px;
text-align: center;
.col-mm-nav {
margin: 0 auto;
width : 520px;
ul {
display : grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows : 1fr;
grid-row-gap : 0px;
}
}
}
.mega-menu-inner.mega-menu-solutions {
.col-mm-nav {
margin : 0 auto;
max-width: 940px;
width : 100%;
ul {
display : grid;
grid-template-columns: repeat(5, 1fr);
}
}
}
.col-mm-description {
padding-left: 30px;
}
.col {
padding: 60px 20px;
}
.nav-dropdown-divider {
border: 1px solid #fff;
margin: 30px 0;
}
.col-1 {
background : rgba(0, 72, 154, .8);
backdrop-filter : blur(15px);
-webkit-backdrop-filter: blur(15px);
text-align : left;
i {
.fs(12);
}
li {
margin-bottom: 10px;
width : 100%;
display : inline-block;
padding-right: 0;
transition : all 2s ease;
span {
border-bottom: 1px solid transparent;
}
a {
.fs(18);
text-transform: none;
font-family : @baseFont;
padding-right : 0;
font-weight : bold;
display : inline-block;
display : initial;
box-sizing : unset;
i {
transition: all .5s ease;
opacity : 0;
}
&:after {}
}
}
li.active {
a {
i {
opacity: 100;
}
}
}
li:hover {
i {
opacity: 100;
}
}
a {
color: #fff;
}
}
.col-2 {
background : rgba(255, 255, 255, 0.8);
backdrop-filter : blur(15px);
-webkit-backdrop-filter: blur(15px);
a {
.fs(16);
flex-direction: column;
padding : 0;
text-transform: none;
}
}
.nav-shop-all {
position: relative;
.img-wrapper-cut {
}
.img-wrapper {
border: none;
img {
}
background :linear-gradient(-45deg, transparent 25px, @brandColor1 0) bottom right;
background-repeat: no-repeat;
height :100%;
}
.dropdown-shop-all {
position: relative;
top : -9vw;
}
a {
font-family: @baseFontHeader;
font-size : clamp(18px, 2vw, 26px);
color : #fff;
display : block;
padding : 0;
text-align : center;
width : 80px;
margin : 0 auto;
line-height: 120%;
}
}
.img-wrapper {
background : #fff;
border : 1px solid #000;
padding : 20px;
text-align : center;
width : 100%;
margin-bottom: 10px;
img {
width : 100%;
max-width: 220px;
}
}
.products-mega-no-border {
.img-wrapper {
border : none;
padding : 0;
text-align : center;
width : 100%;
margin-bottom: 10px;
background : transparent;
img {
width : clamp(100px, 100%, 260px);
max-width: initial;
}
}
}
}
.mega-menu-products.show {
z-index : -9;
transform : translateY(0);
height : auto;
backdrop-filter : blur(15px);
-webkit-backdrop-filter: blur(15px);
top : 130px;
}
.mega-menu-location.show {
z-index : -9;
transform : translateY(0);
height : auto;
backdrop-filter : blur(15px);
-webkit-backdrop-filter: blur(15px);
top : 130px;
}
.mega-menu-resources {
background: rgba(0, 72, 154, .8);
text-align: center;
.mega-grid {
grid-template-columns: 1fr;
width : 100%;
max-width : 1680px;
margin : 0 auto;
}
.view-all-link {
a {
color : #fff;
text-transform : uppercase;
margin-bottom : 20px;
font-family : @baseFontHeader;
display : inline-block;
text-decoration: underline;
}
}
.header-resources-inner {
display : grid;
grid-template-columns: repeat(5, 1fr);
padding : 80px 20px 25px;
gap : 20px;
.col {
background: #fff;
padding : 20px;
}
.ico-features {
margin-bottom: 30px;
min-height : 150px;
}
a {
color: @brandColor1;
}
}
}
.mega-menu-resources.show {
z-index : -9;
transform : translateY(0);
height : auto;
backdrop-filter : blur(15px);
-webkit-backdrop-filter: blur(15px);
top : 130px;
}
.mega-menu-search {
background: rgba(0, 72, 154, .8);
.mega-grid {
grid-template-columns: 1fr;
width : 100%;
max-width : 1680px;
margin : 0 auto;
padding : 80px 20px 40px;
}
span {
cursor: pointer;
}
.close-search {
margin-top : 30px;
color : #fff;
text-transform : uppercase;
margin-bottom : 10px;
font-family : @baseFontHeader;
display : inline-block;
text-decoration: underline;
text-align : center;
}
}
.mega-menu-search.show {
z-index : -9;
transform : translateY(0);
height : auto;
backdrop-filter : blur(15px);
-webkit-backdrop-filter: blur(15px);
top : 130px;
}
.dropdown-products-right {
display : grid;
grid-template-columns: repeat(5, 1fr);
gap : 20px;
text-align : center;
}
.products-wrapper {
display: none;
}
.products-wrapper.products-power-outlets-wrapper {
display: block;
}
.nav-po-grills:hover+.products-wrapper.products-grills-wrapper {
display: block;
}
// Logo
// --------------------------------------------------
.logo-header {
background: url('/assets/site/img/header/logo-background.svg') no-repeat;
background-size:98%;
text-align: center;
position : relative;
z-index : 99999999;
.made-usa {
width : 136px;
margin-bottom: 10px;
}
}
#page-header-logo {
margin : 0px auto;
padding : 0px 0px;
width : @logoWidth;
line-height: 1;
a {
margin : 20px 0px 7px;
width : @logoWidth;
height : 0;
padding-top : @logoTopPadding;
display : inline-block;
overflow : hidden;
background : url(@logoLink) no-repeat;
background-size: contain;
}
}
.icon-search-custom {
width : 15px;
height: 15px;
.iconSet ();
&:before {
content : "\e986";
color : @searchButtonColor;
border-color: transparent;
text-shadow : none;
}
}
.icon-shopping-cart-custom-mobile {
width : @iconSizeCartMobile ;
height: @iconSizeCartMobile ;
.fs(30);
.iconSet ();
content : "\e8cc";
background-position: @iconSizeCartMobile ;
}
.icon-shopping-cart-custom-mobile:before {
content: "\e8cc";
color : @iconCartColor;
}
//
// User Menu
// --------------------------------------------------
//
// User Menu
// --------------------------------------------------
@um-font-size : 13px;
@um-top : 20px;
@um-right : 35px;
@um-color : #333;
@um-color-hover : #333;
@um-text-transform : inherit;
#user-menu {
position : relative;
top : -2px;
list-style: none;
.nav-search-link {
cursor: pointer;
}
i {
font-size : 30px;
color : #000;
vertical-align: middle;
position : relative;
top : -2px;
color : @brandColor1;
}
li {
list-style-type: none;
display : inline-block;
margin-left : 15px;
font-size : @um-font-size;
color : @um-color;
text-transform : @um-text-transform;
vertical-align : middle;
min-height : 30px;
line-height : 30px;
&.account-link {
line-height: 1;
margin : 0;
padding : 0;
a {
background: url(/assets/site/img/icon/ico-user.png) no-repeat;
width : 19px;
height : 19px;
display : block;
}
}
li.hidden-phone {
a[href="/cart"] {
display: block;
}
}
.icon-shopping-cart-custom {
background : url(/assets/site/img/icon/icon-cart.png) no-repeat;
width : 27px;
height : 23px;
float : left;
top : 8px;
position : relative;
margin-right : 3px;
background-size: 23px;
right : 10px;
}
.cart-count {
margin-left: 10px;
}
a,
span,
a.disabled,
small {
color : #000;
font-size: @um-font-size;
&:hover {
color: @um-color-hover;
}
}
}
#mini-cart-wrapper {
a {}
}
}
#lists-toggler+.popover {
width : 100%;
max-width: 300px;
}
//
// Desktop Search
// --------------------------------------------------
#page-header-search {
right : 20px;
top : 37px;
background-color: @searchButtonBackground;
padding : 1px 1px 1px 1px;
width : 100%;
form {
position: relative;
margin : 0;
display : flex;
}
input {
width : 100%;
margin : 0 0 0 0;
border : none;
box-shadow: none;
padding : 20px;
&::placeholder {
color: @brandColor1;
}
}
.btn-primary {
background-color: @brandColor1;
border : none;
background-image: none;
box-shadow : none;
padding : 20px 30px;
border-radius : 0px;
}
::placeholder {
color : #000;
font-size : 13px;
font-family: inherit;
}
}
//
// Nav actions
// --------------------------------------------------
.nav-actions {
display : none;
position: absolute;
top : 0;
right : 0;
}
.btn-nav-cart {
padding : 0;
position: relative;
top : -7px;
}
.btn-nav-menu {
padding: 7px 8px 8px 8px;
}
.btn-nav-menu .icon-bar {
display : block;
width : 25px;
height : 4px;
background-color: @hamburgerMenuColor;
.border-radius(0px);
}
.btn-nav-menu .icon-bar+.icon-bar {
margin-top: 4px;
}
.btn-toggle-module-body {
display : none;
padding : 1px !important;
font-size : 11px;
line-height: 11px;
float : right;
i {
.icon-plus-sign();
margin: 0;
}
&.open i {
.icon-minus-sign();
}
}
//
// Mini Cart
// --------------------------------------------------
.mini-cart-popover {
left : auto !important;
right: -8px;
&.popover {
width : 260px;
max-width: 260px;
.arrow {
left: 90%;
}
}
&.has-scrollbars {
.popover-content {
padding-right: 9px;
}
#mini-cart ul {
overflow-y: scroll;
}
#mini-cart ul li {
padding-right: 5px;
}
}
}
#mini-cart,
.mini-cart {
color: #666;
.header {
border-bottom : 1px solid #ccc;
text-align : center;
font-weight : bold;
padding-bottom: 8px;
}
.footer {
border-top : 1px solid #ccc;
text-align : center;
font-weight : bold;
padding : 10px 0 0 0;
background-color: #fff;
a {
color: @linkColor !important;
}
}
ul {
margin : 0;
list-style: none;
li {
float : none !important;
display : block !important;
margin : 0 0 5px 0 !important;
padding : 2px 0;
font-size : 11px;
border-bottom: 1px solid #ccc;
color : #666;
&:last-child {
border-bottom: none;
}
a {
color : @linkColor;
font-weight: normal;
}
}
}
}
.mini-cart-scroll {
.popover-content {
padding-right: 9px;
}
#mini-cart ul {
overflow-y: scroll;
li {
padding-right: 5px;
}
}
}
//
// Page Header Top
// --------------------------------------------------
#page-header-top {
color : @fontColorTopHeader;
z-index: 999999999;
#page-header-top-inner {
width : @widthSite;
max-width: 100%; //@widthSiteMax;
margin : 0 auto;
position : relative;
.top-nav {
float : left;
font-size: 12px;
ul {
position : relative;
left : 0px;
display : block;
float : left;
margin : 0px 10px;
list-style-type: none;
text-transform : uppercase;
li {
float : left;
position: relative;
color : @fontColorTopHeader;
a {
float : none;
line-height : 20px;
padding : 10px 10px;
color : @fontColorTopHeader;
text-decoration : none;
display : block;
font-size : 12px;
font-weight : 400;
background-color: transparent;
&:hover {
color: @fontColorTopHeader;
}
}
}
}
}
.phone {
padding : 8px 10px;
float : right;
font-size: .85em;
ul {
position : relative;
left : 0px;
display : block;
float : left;
margin : 0px 10px;
list-style-type: none;
li {
float : left;
position : relative;
margin-left: 20px;
color : @fontColorTopHeader;
a {
color: @fontColorTopHeader;
&:hover {
cursor : default;
text-decoration: none;
}
}
}
}
}
}
}
#user-name {
position: relative;
&:hover {
.user-name-span {
display: block;
opacity: 100;
}
}
.user-name-span {
width : 200px;
position : absolute;
display : none;
opacity : 0;
margin : 0;
right : -92px;
padding-top: 9px;
transition : all 4s;
.user-name-span-inner {
padding : 15px;
background : rgba(234, 234, 234, .7);
backdrop-filter : blur(15px);
-webkit-backdrop-filter: blur(15px);
}
.user-welcome {
.fs(16);
}
ul {
display : inline-block;
margin : 0;
padding : 0 0 10px;
text-align: left;
li {
margin : 0;
padding : 0;
width : 100%;
min-height : 20px;
line-height: initial;
}
}
a {
padding : 0 10px;
position: relative;
color : @brandColor1;
display : block;
width : 100%;
&:hover {
color: @brandColor1;
}
}
}
.user-name-span-inner:before,
.user-name-span-inner:after {
bottom : 100%;
border : solid transparent;
content : " ";
height : 0;
width : 0;
position : absolute;
pointer-events: none;
}
.user-name-span-inner:after {
//border-color: rgba(234,234,234,.7);
border-bottom-color: #EEE;
border-width : 9px;
left : 50%;
margin-left : -9px;
}
.user-name-span-inner:before {
//border-color: rgba(113, 158, 206, 0);
border-bottom-color: #FFF;
border-width : 10px;
left : 50%;
margin-left : -10px;
}
}
//
// Responsive: All media
// --------------------------------------------------
.top-message {
text-align: center;
a {
color : #fff;
text-decoration: underline;
.fs(20);
}
p {
color: #fff;
.fs (20);
margin : 0;
padding: 8px 20px;
}
}
#page-header-contact {
display: none;
}
//
// Responsive: Large desktop and up
// --------------------------------------------------
@media (min-width: 980px) {
.hidden-user-menu-desktop {
display: none;
}
.hamburger {
display: none;
}
//
// Desktop Simple Pure CSS Nav
// --------------------------------------------------
@phnav-top : 36px;
@phnav-left : 240px;
@phnav-position : absolute;
@phnav-border : none;
@phnav-background-color : transparent;
@phnav-dropdown-background : #000;
@phnav-dropdown-background-hover : red;
@phnav-dropdown-font-color : #fff;
@phnav-dropdown-font-color-hover : #fff;
@phnav-dropdown-font-size : 13; //using mixin doesn't need px
@phnav-text-transform : capitalize;
#page-header-nav {
overflow : visible;
margin-bottom: 0px;
position : @phnav-position;
top : @phnav-top;
left : @phnav-left;
border-top : @phnav-border;
border-bottom: @phnav-border;
}
#page-header-nav-inner {
.clearfix();
background-color: @phnav-background-color;
border : none;
ul {
position : relative;
left : 0;
display : block;
float : left;
margin : 0 0px 0 0;
list-style-type: none;
z-index : 999;
}
ul>li {
float : left;
position: relative;
}
ul>li>a {
float : none;
line-height : 20px;
padding : 10px 30px 10px 0px;
color : #575757;
text-decoration : none;
display : block;
font-size : 14px;
letter-spacing : 1px;
background-color: transparent;
text-transform : uppercase;
}
// ul>li:first-child>a {}
ul>li:last-child>a {
background-image: none;
}
ul>li>a:focus,
ul>li>a:hover {
color: #575757;
}
ul>.active>a,
ul>.active>a:hover,
ul>.active>a:focus {
color: #575757;
}
ul ul {
position : absolute;
display : none;
top : 40px;
left : 0px;
margin : 0;
list-style : none outside none;
color : #fff;
border : none;
border-radius: 0px;
box-shadow : 0 3px 5px rgba(0, 0, 0, 0.2);
opacity : 0;
white-space : nowrap;
text-align : left;
min-width : 200px;
li.active {
a {
color: #fff;
}
}
li {
display : block;
margin : 0;
padding : 0;
position: relative;
float : none;
a {
display : block;
height : auto;
// float : left;
margin : 0;
padding : 10px;
.fs(@phnav-dropdown-font-size);
color : @phnav-dropdown-font-color;
background: @phnav-dropdown-background;
box-sizing: border-box;
}
ul {
left : 99.5%;
margin: 0;
top : 0;
}
}
}
ul li:hover ul ul,
ul li:hover ul ul ul,
ul li:hover ul ul ul ul {
display: none;
}
ul li:hover ul,
ul li li:hover ul,
ul li li li:hover ul,
ul li li li li:hover ul {
display: block;
opacity: 1;
.transition2 ();
}
ul>li>ul>li>a:hover {
color: @phnav-dropdown-font-color-hover !important;
}
ul li ul a {
height : 100%;
width : 100%;
border-right : none;
padding : 10px 10px 10px 10px;
border-bottom : dotted 1px #e2e2e2;
text-transform: @phnav-text-transform;
.transition2 ();
&:hover {
background: @phnav-dropdown-background-hover;
padding : 10px 10px 10px 20px;
}
}
// ul li ul>li:first-child>a {}
.toggle-nav-toggle {
display: none;
}
}
#page-header {
//background-color: @backgroundColorHeader;
padding: 0;
margin : 0;
}
}
//
//
// Responsive: Tablet and Below
// --------------------------------------------------
@media (max-width: 1240px) {
.mega-menu {
.col-2 {
padding: 100px 15px 60px;
}
.mega-grid {
display : grid;
grid-template-columns: 250px 1fr;
}
.col-1 li {
margin-bottom: 5px;
}
}
.logo-header {
background: url('/assets/site/img/header/logo-background-mobile.svg') no-repeat;
.made-usa {
width : 136px;
margin-bottom: 10px;
}
}
#page-header .logo-nav-wrapper-inner {
grid-template-columns: 1fr 197px 1fr;
grid-template-areas :
"nav-left-header nav-logo nav-right-header";
}
#page-header-logo {
width : 180px;
line-height: 1;
a {
margin : 16px 0px 5px;
width : 169px;
padding-top: 46px;
}
}
}
//
//
// Responsive: Tablet and Below
// --------------------------------------------------
@media (max-width: 979px) {
//
// Responsive: Admin
// --------------------------------------------------
.hidden-user-menu-mobile {
display: none;
}
.top-message {
p,
a {
.fs(14);
}
}
#admin-menu {
.container {
width : 100%;
max-width : 100%;
padding : 0px 15px;
box-sizing: border-box;
}
}
.btn-hamburger-menu {
color : @brandColor1;
width : 75px;
display : flex !important;
align-items : center;
-webkit-tap-highlight-color: transparent;
}
.nav-menu-mobile-wrapper {
a {
color: #fff;
}
}
.page-header-wrapper {
ul li a {
color: #fff;
}
.nav-menu-mobile-wrapper {
a {
color: #fff;
}
}
.nav-mobile-links-wrapper {
a,
li,
span {
color: #fff;
}
}
.nav-actions-mobile {
padding-right: 20px;
li {
list-style-type: none;
display : inline-block;
color : #333;
text-transform : inherit;
vertical-align : middle;
padding-right : 0;
}
i {
.fs(25);
color : @brandColor1;
vertical-align: middle;
position : relative;
color : #004a98;
}
a {
.fs(25);
line-height : 0;
padding-right: 0;
color : #fff;
}
.btn-nav-cart {
top : 0px;
margin-left: 10px;
}
}
}
#page-header-top {
.header-container {
display: none;
}
}
.page-header-wrapper {
.nav-left-header {
height : 80px;
padding-left: 20px;
}
.nav-right-header {
grid-template-columns: 1fr 1fr;
gap : 0;
height : 80px;
padding-right : 20px;
}
.logo-nav-wrapper {
height : 80px;
padding: 0;
}
}
#page-header {
background-color: @backgroundColorHeader;
}
//
// Responsive: Hamburger/Buttons
// --------------------------------------------------
.hamburger {
position: absolute;
top : 10px;
right : 10px;
padding : 5px 15px !important;
}
//
// Responsive: Logo down to phone
// --------------------------------------------------
#page-header-logo {
//height : 70px;
//margin-bottom: 0;
//line-height : 50px;
a {
/*background-size: contain;
width : @logoWidthFooter;
height : auto;
text-indent : -1000px;
padding : 0;
margin-top : 10px;*/
}
}
//
// Responsive: Search
// --------------------------------------------------
#page-header-search {
/*position:absolute;
top:80px; */
position: relative;
top : 0px;
right : 0px;
width : 100%;
}
//
// Responsive: Navigation behind Hamburger
// --------------------------------------------------
#page-header-menu {
.btn-nav-menu {
background-color: @navMenuBackground;
padding : 7px 8px 8px 8px;
border : none;
font-weight : bold;
font-size : 18px;
font-family : arial;
}
.btn-nav-cart {
border-radius: 0px;
}
.nav-actions {
display: block;
z-index: 99;
margin : 15px 0 0 0;
right : 0px;
top : 50px;
}
.nav-bg {
display : none;
z-index : -9;
position : fixed;
top : 0;
right : 0;
bottom : 0;
left : 0;
background-color: #000;
&.in {
display: block;
.opacity(30);
}
}
.nav-menu {
z-index : -9;
width : 100%;
max-width : 420px;
height : 100%;
position : fixed;
top : 0px;
left : -1000px;
padding : 150px 8px 8px 8px;
background-color: @brandColor1;
/*.box-shadow( 0 3px 10px rgba(0,0,0,0.2) );*/
.transition(left 400ms ease-in-out);
overflow-y: auto;
&.in {
left: 0px;
.transition(left 400ms ease-in-out);
}
i {
color: #fff;
.fs(13);
}
#user-menu,
#page-header-nav,
#page-header-contact {
position : relative;
left : 0;
top : 0px;
margin-top : 15px;
padding-top: 15px;
border-top : 1px solid #efefef;
ul {
margin : 0 0 20px 0;
padding : 0;
list-style: none;
}
ul li {
margin : 0;
padding : 0;
float : none;
display : block;
line-height: 24px;
}
ul li a {
padding: 3px 5px;
color : @responsiveNavLinkColor;
}
ul #user-name {
padding: 0px 5px;
color : @responsiveNavLinkColor;
}
}
#user-menu {
ul {
li,
li a {
font-size : @responsiveUserMenuNavFontSize;
line-height: 30px;
}
}
}
#page-header-nav {
padding-bottom: 100px;
li.active>a {
background-color: rgba(240, 240, 240, 0.2);
}
ul>li>a {
display : block;
padding : 12px 5px;
line-height : 20px;
border-bottom: 1px solid #efefef;
color : @responsiveNavLinkColor;
}
ul>li>ul>li>a {
border: none;
}
ul li:not(.active) ul {
display: none;
}
ul li ul {
margin: 0 0 0 10px;
}
.toggle-nav-toggle {
position: absolute;
right : 0;
}
}
#page-header-nav-inner {
background: none;
.box-shadow(none);
border: none;
.has-children {
.toggle-nav-toggle:first-of-type {
display: none;
}
}
.nav {
float : none;
max-height: none;
overflow : inherit;
overflow-y: auto;
max-height: 300px;
a {
border: none;
}
}
}
}
.mobile-nav-flyout-top {
padding-top : 15px;
display : grid;
grid-template-columns: 1fr 1fr 1fr 50px;
margin-left : 20px;
i {
.fs(24);
position: relative;
top : -5px;
}
}
}
.user-name-flyout {
display : flex;
margin-left : 20px;
margin-bottom : 15px;
margin-right : 20px;
border-bottom : 1px solid;
padding-bottom: 20px;
.user-name-user {
margin-right: 10px;
}
.user-name-logoff {
margin-left: 10px;
}
}
.mega-menu-search.show {
top: 100px;
}
.products-mega-no-border .img-wrapper {
padding: 0 !important;
}
}
//
//
// Responsive: Tablet and Below
// --------------------------------------------------
@media (max-width: 400px) {
#page-header .logo-nav-wrapper-inner {
grid-template-columns: 1fr 150px 1fr;
}
#page-header-logo {
width: 124px;
a {
width : 124px;
padding-top: 38px;
}
}
.logo-header {
background : url(/assets/site/img/header/logo-background-mobile-150.svg) no-repeat center;
background-size: 95%;
.made-usa {
width: 104px;
}
}
}
.btn-hamburger {
position : relative;
width : 75px;
top : -3px;
transition-duration: 0.5s;
.icon {
transition-duration: 0.5s;
position : absolute;
height : 0px;
width : 30px;
top : 30px;
background-color : @brandColor1;
}
.icon:before {
transition-duration: 0.5s;
position : absolute;
width : 30px;
height : 2px;
background-color : @brandColor1;
content : "";
top : 10px;
}
.icon:after {
transition-duration: 0.5s;
position : absolute;
width : 30px;
height : 2px;
background-color : @brandColor1;
content : "";
top : 0px;
}
span {
display : block;
position : relative;
padding-top : 36px;
transition-duration: 0.5s;
width : 67px;
color : @brandColor1;
}
&:hover {
cursor: pointer;
}
}
.btn-hamburger.open {
span {
opacity: 0;
}
.icon {
transition-duration: 0.5s;
}
.icon:before {
transform: rotateZ(135deg) scaleX(1.25) translate(-1px, 1px);
}
.icon:after {
transform: rotateZ(-135deg) scaleX(1.25) translate(-5px, -5px)
}
}
.nav-mobile-links-wrapper {
padding: 20px;
.nav-mobile-ul {
margin: 0;
h2 {
color : #fff;
margin-bottom: 0;
a {
font-family: @baseFontHeader;
}
}
i.rotate {
transform: rotate(180deg);
}
li {
width : 100%;
padding : 30px 0 25px;
border-bottom: 1px solid #fff;
}
ul {
margin: 10px 0;
li {
padding : 5px 0;
border-bottom: none;
}
}
}
.item-main-link {
display: inline-block;
&:after {
content : '\2b';
font-family : "Font Awesome 6 Pro";
font-weight : normal;
font-style : normal;
margin : 0px 0px 0px 10px;
text-decoration: none;
.fs(11);
}
}
.item-main-link.open {
&:after {
content : '\f068';
font-family: "Font Awesome 6 Pro";
.fs(11);
}
}
.nav-mobile-submenu-slide-nav {
display : none;
margin-top: 10px;
.item {
padding: 10px 0;
span {
padding: 15px 0;
}
.img-wrapper {
background: #fff;
width : 78px;
height : 78px;
padding : 10px;
}
a {
display : grid;
grid-template-columns: 90px 1fr;
p {
display : flex;
align-items: center;
}
}
}
.item.shop-all {
a {
display : inline-block;
color : @brandColor1;
width : 100%;
text-align: center;
.fs(26);
font-family : @baseFontHeader;
text-transform: uppercase;
}
}
}
}
.mobile-submenu-nav {
display : none;
//transition:all 2s;
}
.mobile-submenu-nav.open {
//display:block;
}
