0001 backup header

Financing Available Learn More

NEED
ASSISTANCE?

We are here to help.

@model PageModel

@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; }

Questions? Feedback?Olark live chat software

Products

Your Settings

Resources

Get To Know Us

NEED
ASSISTANCE?

Products

Your Settings

Get To Know Us

Products

Your Settings

Resources

Get To Know Us

NEED ASSISTANCE?

Products

Your Settings

Get To Know Us

NEED
ASSISTANCE?