"@media (min-width: 1024px) {
.napa-nav-hdrsection geo-hamburger {
width: 15.5% !important;
}
}
@media (min-width: 1024px) {
.fixed-header
.napa-nav-hdrsection
.geo-nav-bar:not(.throughhamburger)
div
> ul
> li.active.geo-menu-popular
> ul {
max-height: 30rem;
}
}
.geo-nav-bar {
position: relative;
}
.fixed-header .napa-nav-hdrsection .geo-nav-bar:not(.throughhamburger) div > ul {
flex-direction: row;
}
/* All css related to Nav tab menu */
.moremenu {
display: flex;
align-items: center;
height: 42px;
padding: 0 30px 0 14px !important;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
background: transparent;
}
.moremenu-1 {
margin-left: auto !important;
}
.moremenu-2 {
margin-right: 0 !important;
}
.moremenu.active {
background: #fff;
.moremenuFont {
color: #001489 !important;
}
}
#nav-ribbon .moremenu a.moremenu-txt::after {
content: " ";
position: absolute;
top: 45%;
right: 10px;
width: 0.5rem;
height: 0.5rem;
border-left: 2px solid white;
border-bottom: 2px solid white;
border-color: white;
-webkit-transform: rotate(-45deg) translateY(-50%);
-ms-transform: rotate(-45deg) translateY(-50%);
transform: rotate(-45deg) translateY(-50%);
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
#nav-ribbon .moremenu.active a.moremenu-txt::after {
border-color: #001489;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
.moremenu .nav-tab-menu {
transform-origin: unset !important;
-webkit-transition: all 0s linear;
-o-transition: all 0s linear;
transition: all 0s linear !important;
-webkit-transition-delay: 0s !important;
-o-transition-delay: 0s !important;
transition-delay: 0s !important;
}
.nav-header-position {
width: max-content !important;
box-shadow: none !important;
position: absolute;
top: 42px !important;
right: 0% !important;
}
.more-close-icon {
font-size: 18px !important;
color: #001489;
padding-left: 37px;
position: absolute;
margin-top: -10px !important;
right: 10px;
}
@media (min-width: 1024px) {
.fixed-header .napa-nav-hdrsection .geo-nav-bar:not(.throughhamburger) div > ul > li > ul {
background-color: white;
}
}
@media (min-width: 1024px) {
.fixed-header
.napa-nav-hdrsection
.geo-nav-bar:not(.throughhamburger)
div
> ul
> li
> ul
> li.hasL3
> ul
> li
a,
.fixed-header .napa-nav-hdrsection .geo-nav-bar:not(.throughhamburger) div > ul > li > ul > li a {
color: black;
}
}
@media (min-width: 1024px) {
.fixed-header .napa-nav-hdrsection .geo-nav-bar:not(.throughhamburger) div > ul > li {
text-transform: none;
}
}
@media (min-width: 1024px) {
.fixed-header
.napa-nav-hdrsection
.geo-nav-bar:not(.throughhamburger)
div
> ul
> li.active.geo-menu-popular
> ul
li {
width: none;
}
}
/* my css changes */
@media (min-width: 1024px) {
.fixed-header
.napa-nav-hdrsection
.geo-nav-bar:not(.throughhamburger)
ul
> li.active
> a:not(.moremenu-txt):after {
border: 0.125rem solid #001489 !important;
border-bottom: transparent !important;
border-left: transparent !important;
margin-right: 6px !important;
margin-top: 16px !important;
/* content: " "; */
height: 0.5rem;
position: absolute;
/* right: 10px !important; */
top: 0.125rem;
-webkit-transform: rotate(315deg) !important;
-ms-transform: rotate(315deg) !important;
transform: rotate(315deg) !important;
width: 0.5rem;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
}
/*
.moremenu .open-more-model .active a::after{
} */
.nav-shop-deal .button {
display: flex;
padding: 12px 20px;
justify-content: center;
align-items: center;
flex: 1 0 0;
border-radius: 3px;
background: #001489;
width: 130px;
height: 40px;
}
.nav-shop-deal .button h4 {
font-size: 14px;
font-family: "NAPA SANS";
font-style: normal;
font-weight: 700;
line-height: 19.5px;
text-align: right;
color: #fff;
font-family: "NAPA SANS", sans-serif;
text-transform: capitalize;
}
/* oil & chem > paintbody format */
#nav-ribbon .oilchemicals.nav-ribbon-header .nav-row-group,
#nav-ribbon .toolsequipment.nav-ribbon-header .nav-row-group,
#nav-ribbon .paintbody.nav-ribbon-header .nav-row-group {
display: flex;
padding: 0px 32px;
padding-top: 14px;
align-items: flex-start;
gap: 12px;
align-self: stretch;
width: 809px;
height: 360px;
flex-direction: column;
}
#nav-ribbon .oilchemicals.nav-ribbon-header .nav-row-group .column-group,
#nav-ribbon .paintbody.nav-ribbon-header .nav-row-group .column-group {
display: flex;
height: 233px;
align-items: flex-start;
align-self: stretch;
}
#nav-ribbon .toolsequipment.nav-ribbon-header .nav-row-group .column-group {
display: flex;
height: 156px;
align-items: flex-start;
align-self: stretch;
margin-bottom: 36px;
}
#nav-ribbon .oilchemicals.nav-ribbon-header .nav-row-group .column-group .column-text,
#nav-ribbon .toolsequipment.nav-ribbon-header .nav-row-group .column-group .column-text,
#nav-ribbon .paintbody.nav-ribbon-header .nav-row-group .column-group .column-text {
display: flex;
width: 316px;
padding: 4px 24px 0px 0px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
#nav-ribbon .oilchemicals.nav-ribbon-header .nav-row-group .column-group .column-text:nth-child(2),
#nav-ribbon .toolsequipment.nav-ribbon-header .nav-row-group .column-group .column-text:nth-child(2),
#nav-ribbon .paintbody.nav-ribbon-header .nav-row-group .column-group .column-text:nth-child(2) {
max-width: 234px;
}
#nav-ribbon .oilchemicals.nav-ribbon-header .nav-row-group .column-group .column-text .geo-overlay-item,
#nav-ribbon .toolsequipment.nav-ribbon-header .nav-row-group .column-group .column-text .geo-overlay-item,
#nav-ribbon .paintbody.nav-ribbon-header .nav-row-group .column-group .column-text .geo-overlay-item {
margin-right: 0;
}
#nav-ribbon .oilchemicals.nav-ribbon-header .nav-row-group .column-group .main-promo-shop,
#nav-ribbon .toolsequipment.nav-ribbon-header .nav-row-group .column-group .main-promo-shop,
#nav-ribbon .paintbody.nav-ribbon-header .nav-row-group .column-group .main-promo-shop {
display: flex;
width: 195px;
padding-bottom: 16px;
justify-content: center;
align-items: center;
gap: 4px;
}
#nav-ribbon .oilchemicals.nav-ribbon-header .nav-row-group .column-group .main-promo-shop .button,
#nav-ribbon .toolsequipment.nav-ribbon-header .nav-row-group .column-group .main-promo-shop .button,
#nav-ribbon .paintbody.nav-ribbon-header .nav-row-group .column-group .main-promo-shop .button {
display: flex;
padding: 12px 20px;
justify-content: center;
align-items: center;
flex: 1 0 0;
border-radius: 3px;
background: #001489;
}
#nav-ribbon .oilchemicals.nav-ribbon-header .nav-row-group .column-group .main-promo-shop .button h4,
#nav-ribbon .toolsequipment.nav-ribbon-header .nav-row-group .column-group .main-promo-shop .button h4,
#nav-ribbon .paintbody.nav-ribbon-header .nav-row-group .column-group .main-promo-shop .button h4 {
font-size: 14px;
/* font-family: "NAPA SANS"; */
font-style: normal;
font-weight: 700;
line-height: 19.5px;
text-align: right;
color: #fff;
font-family: "NAPA SANS", sans-serif;
text-transform: capitalize;
}
#nav-ribbon .oilchemicals.nav-ribbon-header .nav-row-group .column-group .main-promo-shop .main-promo-shop-text,
#nav-ribbon
.toolsequipment.nav-ribbon-header
.nav-row-group
.column-group
.main-promo-shop
.main-promo-shop-text,
#nav-ribbon .paintbody.nav-ribbon-header .nav-row-group .column-group .main-promo-shop .main-promo-shop-text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
#nav-ribbon
.oilchemicals.nav-ribbon-header
.nav-row-group
.column-group
.main-promo-shop
.main-promo-shop-text
strong,
#nav-ribbon
.toolsequipment.nav-ribbon-header
.nav-row-group
.column-group
.main-promo-shop
.main-promo-shop-text
strong,
#nav-ribbon
.paintbody.nav-ribbon-header
.nav-row-group
.column-group
.main-promo-shop
.main-promo-shop-text
strong {
color: black;
font-size: 14px;
line-height: 16px;
font-family: "NAPA SANS", sans-serif;
}
#nav-ribbon .oilchemicals.nav-ribbon-header .nav-row-group .nav-flyout-hero,
#nav-ribbon .toolsequipment.nav-ribbon-header .nav-row-group .nav-flyout-hero,
#nav-ribbon .paintbody.nav-ribbon-header .nav-row-group .nav-flyout-hero {
display: flex;
width: 727px;
height: 57px;
justify-content: center;
align-items: center;
background: #001984;
}
/* active clickable dropdown */
.fixed-header
.napa-nav-hdrsection
.geo-nav-bar:not(.throughhamburger)
div
> ul
> li.active.geo-menu-popular
> ul {
display: flex;
flex-direction: row;
align-items: flex-start;
width: 100vw;
max-width: 100vw;
height: auto;
max-height: 450px;
padding: 0;
box-sizing: border-box;
position: absolute;
left: 0;
top: 100%;
z-index: 1000;
transform: translateX(-18.24%);
justify-content: center;
opacity: 1;
visibility: visible;
transition: opacity 0s ease-in-out !important;
}
/* Replacement Parts Dropdown */
/* create only for MORE drop down */
.fixed-header .napa-nav-hdrsection .geo-nav-bar:not(.throughhamburger) ul > li > a:not(.moremenu-txt)::after {
border: none;
border-right: transparent;
border-top: transparent;
content: " ";
height: 0.5rem;
position: absolute;
right: 0;
top: 0.125rem;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 0.5rem;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
#nav-ribbon {
display: flex;
align-items: center;
align-self: stretch;
}
.geo-nav-bar #nav-ribbon .nav-ribbon-header {
display: inline-flex;
padding: 0px 16px;
justify-content: center;
align-items: center;
gap: 6px;
margin: 0;
height: 42px;
flex-direction: column;
z-index: 1;
}
/* Initial hover start */
/* yellow line */
.geo-nav-bar #nav-ribbon .nav-ribbon-header::before {
content: "";
position: absolute;
left: 16px;
right: 0;
bottom: 0;
height: 4px;
background-color: #ffc72c;
width: 128px;
top: 38px;
z-index: 2000;
transition: transform 100ms ease-in-out;
transform: scaleY(0);
}
.geo-nav-bar #nav-ribbon .accessories.nav-ribbon-header::before {
width: 78px;
}
.geo-nav-bar #nav-ribbon .oilchemicals.nav-ribbon-header::before {
width: 100px;
}
.geo-nav-bar #nav-ribbon .paintbody.nav-ribbon-header::before {
width: 82px;
}
.geo-nav-bar #nav-ribbon .toolsequipment.nav-ribbon-header::before {
width: 118px;
}
.geo-nav-bar #nav-ribbon .nav-ribbon-header:hover::before,
.geo-nav-bar #nav-ribbon .nav-ribbon-header:focus::before,
.geo-nav-bar #nav-ribbon .nav-ribbon-header.open::before {
transform: scaleY(1);
}
/* Initial hover end */
/* Focused hover start */
/* white background */
.geo-nav-bar #nav-ribbon .nav-ribbon-header::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
background-color: transparent;
border-radius: 3px 3px 0px 0px;
}
/* new css */
/* .geo-nav-bar #nav-ribbon .nav-ribbon-header:hover::after,
.geo-nav-bar #nav-ribbon .nav-ribbon-header:focus::after,
.geo-nav-bar #nav-ribbon .nav-ribbon-header.open::after {
background-color: #FFFFFF;
border-radius: 3px 3px 0px 0px;
transition: background-color 100ms ease-in 300ms;
} */
#nav-ribbon .nav-ribbon-header.open .ribbon-header-text {
color: #001489;
transition: color 100ms ease-in;
}
/* hover / click handling */
.geo-nav-bar.no-hover-background #nav-ribbon .nav-ribbon-header:not(.open):hover::after {
background-color: transparent;
}
.geo-nav-bar.no-hover-background #nav-ribbon .nav-ribbon-header:not(.open):hover .ribbon-header-text {
color: #fff;
}
/* Replacement parts text */
.geo-nav-bar #nav-ribbon .nav-ribbon-header .ribbon-header-text::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
color: #001489;
transform: scaleZ(0);
}
/* hover/click handling */
.geo-nav-bar #nav-ribbon .nav-ribbon-header .ribbon-header-text:hover::after,
.geo-nav-bar #nav-ribbon .nav-ribbon-header .ribbon-header-text:focus::after,
.geo-nav-bar #nav-ribbon .nav-ribbon-header.open .ribbon-header-text::after {
transform: scaleZ(1);
}
#nav-ribbon .nav-ribbon-header .ribbon-header-text {
color: #fff;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 22px;
z-index: 1;
transition: color 0ms ease-in-out;
}
/* #nav-ribbon .nav-ribbon-header:hover .ribbon-header-text,
#nav-ribbon .nav-ribbon-header:focus .ribbon-header-text,
#nav-ribbon .nav-ribbon-header.open .ribbon-header-text {
color: #001489;
transition: color 100ms ease-in 300ms;
} */
#nav-ribbon .nav-ribbon-header.current.active .ribbon-header-text {
color: #001489 !important;
transition: color 100ms ease-in !important;
}
/* Focused hover end */
.nav-header-separator {
display: flex;
width: 1px;
height: 24px;
align-items: center;
gap: 6px;
background: #7f89c4;
}
/* dropdown hover state */
/* hidden/default state */
.geo-nav-bar #nav-ribbon .nav-ribbon-header > ul {
display: flex;
flex-direction: row;
align-items: flex-start;
width: 100%;
height: auto;
padding: 0;
box-sizing: border-box;
/* position: absolute;
left: -25rem;
top: 100%; */
z-index: 1000;
/* transform: translateX(-18.33%); */
justify-content: center;
opacity: 0;
visibility: hidden;
transition:
opacity 0s ease-in-out,
visibility 0s ease-in-out;
box-shadow: none;
}
/* dropdown visible state */
.geo-nav-bar #nav-ribbon .nav-ribbon-header > ul,
.geo-nav-bar #nav-ribbon .nav-ribbon-header:focus > ul {
/* transition: opacity 100ms ease-in 300ms, visibility 100ms ease-in 300ms; */
opacity: 1;
visibility: visible;
}
@media (min-width: 2560px) {
.fixed-header
.napa-nav-hdrsection
.geo-nav-bar:not(.throughhamburger)
div
> ul
> li.active.geo-menu-popular
> ul {
transform: translateX(-42.15%);
}
}
@media (max-width: 1024px) {
.fixed-header
.napa-nav-hdrsection
.geo-nav-bar:not(.throughhamburger)
div
> ul
> li.active.geo-menu-popular
> ul {
transform: translateX(-14.53%);
}
}
.fixed-header
.napa-nav-hdrsection
.geo-nav-bar:not(.throughhamburger)
div
> ul
> li.active.geo-menu-popular
> ul
li
a {
display: block;
color: #000 !important;
line-height: 1.5rem;
font-size: 14px;
}
.fixed-header
.napa-nav-hdrsection
.geo-nav-bar:not(.throughhamburger)
div
> ul
> li.active.geo-menu-popular
> ul
li
ul
.geo-overlay-item {
display: block;
color: #000 !important;
}
#nav-ribbon .nav-ribbon-header .nav-single-category strong a {
color: #001489;
font-size: 1rem;
font-family: "NAPA SANS", sans-serif;
/* text-decoration:none; */
}
.geo-menu-item-container {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
margin-top: 10px !important;
padding-top: 10px !important;
list-style: none !important;
}
.fixed-header .napa-nav-hdrsection .geo-nav-bar:not(.throughhamburger) div > ul .geo-overlay-item {
padding-right: 0px;
margin: 0;
}
.geo-nav-bar #nav-ribbon .nav-ribbon-header .column-text .geo-overlay-item > a {
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
.geo-sub-menu-section:nth-child(2) .geo-menu-item-container li ul li a {
display: block !important;
color: #000 !important;
}
.column-text {
float: left;
height: auto;
background-color: white;
width: auto;
padding: 5px;
}
.left-section.column-text {
display: flex;
flex-direction: column;
padding: 0px 0px 30px 40px;
gap: 12px;
}
.nav-popular-section {
gap: 8px;
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
}
#nav-ribbon .nav-ribbon-header .nav-popular-section strong {
color: #001489;
font-size: 1rem;
}
.nav-single-category {
padding: 8px 24px 28px 0px;
}
.nav-separator {
display: flex;
width: 1px;
height: auto;
flex-direction: column;
align-items: flex-start;
gap: 0px;
background: var(--Shared-Colors-NAPA-Gray-4, #adadad);
margin-top: 14px;
margin-bottom: 14px;
}
/* .nav-separator.secondary{
height:346px;
} */
.nav-shop-section {
display: flex;
width: 237px;
padding: 16px 0px 16px 32px;
flex-direction: column;
}
.nav-shop-section.secondary {
padding: 16px 0px 0px 0px;
align-items: flex-start;
gap: 10px;
}
.nav-close-icon.secondary {
display: flex;
padding-right: 18px;
justify-content: flex-end;
align-items: center;
align-self: stretch;
font-size: 18px;
color: #001489;
line-height: 16px;
margin-bottom: 0;
}
.nav-shop-deal {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
gap: 8px;
}
.nav-shop-deal.secondary {
padding: 5px;
}
.nav-shop-section p {
color: #000;
text-align: center;
font-feature-settings:
"liga" off,
"clig" off;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
margin: 0 !important;
}
#category-more {
display: flex;
width: max-content;
height: 1.15rem;
padding: 0px 4px;
align-items: center;
gap: 10px;
border: 1px solid #001489;
border-radius: 2px;
background: #fff;
margin-top: 6px;
}
#category-more .geo-overlay-item a {
font-size: 12px !important;
font-style: normal !important;
font-weight: 700 !important;
line-height: 10px;
color: #001489 !important;
height: 9px;
flex: 1 0 0;
text-align: center;
text-decoration: none;
padding: 0;
margin: 0;
}
#category-more:hover {
background: #001489;
}
#category-more:hover .geo-overlay-item a {
color: #fff !important;
text-decoration: none;
}
.main-col-header {
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
}
#nav-show-all-cat {
display: flex;
width: 192px;
height: 26px;
padding: 1px 4px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 2px;
border: 1px solid #001489;
background: #fff;
}
#nav-show-all-cat a {
color: #001489;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 16px;
text-decoration: none;
}
#nav-show-all-cat:hover a {
color: #fff;
text-decoration: none;
}
#nav-show-all-cat:hover {
background: #001489;
}
#nav-ribbon .nav-shop-deal.secondary .button {
display: flex;
padding: 12px 20px;
justify-content: center;
align-items: center;
flex: 1 0 0;
border-radius: 3px;
background: #001489;
width: 100%;
max-height: 44px;
max-width: 109px;
}
#nav-ribbon .nav-shop-deal.secondary .button h4 {
font-size: 14px;
font-family: "NAPA SANS";
font-style: normal;
font-weight: 700;
line-height: 19.5px;
text-align: right;
color: #fff;
font-family: "NAPA SANS", sans-serif;
text-transform: capitalize;
}
#nav-ribbon .nav-ribbon-header .geo-sub-menu ul > li.active > a:after {
border: none !important;
}
.nav-more-header-color {
color: #347f51;
padding: 0px 40px 15px 0px;
text-transform: math-auto !important;
}
.nav-more-header-deals {
color: #347f51;
text-transform: capitalize !important;
padding-left: 5px !important;
}
.nav-more-header-color::first-letter {
text-transform: capitalize !important;
}
.nav-header-item-align {
font-size: 14px !important;
padding-bottom: 5px !important;
}
.nav-more-wrapper {
display: flex;
flex-direction: row;
}
.nav-more-wrapper-flex {
display: flex;
}
.nav-more-h3 {
color: #000;
text-transform: capitalize !important;
padding-bottom: 15px;
}
.nav-more-item-pd {
padding: 3px !important;
}
@media (min-width: 1024px) {
.nav-more-wrapper div > li a {
color: black !important;
}
}
.below-nav-overlay {
display: none;
position: fixed;
top: 230px;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(51, 51, 51, 0.75);
z-index: 0;
transition: opacity 300ms ease-in-out;
opacity: 0;
}
.below-nav-overlay.active {
display: block;
opacity: 1;
transition: opacity 300ms ease-in-out;
}
.geo-nav-bar-scroll {
overflow: hidden;
}
.nav-img-position {
position: relative;
left: 0px;
top: 0.5rem;
padding: 10px;
}
.img-container {
padding-bottom: 10px;
}
.replacement-parts-wd {
word-wrap: break-word;
width: 9rem;
}
.accesories-li-wd {
word-wrap: break-word;
width: 10rem;
}
.popular-category-li {
word-wrap: break-word;
width: 15rem;
}
.tolls-quip-popular-brand {
word-wrap: break-word;
width: 8.4rem;
}
.paints-body-popular {
word-wrap: break-word;
width: 8.7rem;
}
.geo-nav-bar {
margin-bottom: 0 !important;
margin-top: 0 !important;
}
.geo-nav-bar p {
margin: 0 !important;
}
/* Hover delay fix on open */
.geo-nav-bar #nav-ribbon .nav-ribbon-header.current.active::after {
transition: background-color 100ms ease-in !important;
}
/* Fix for PDP - CheckNearByStores Background*/
@media screen and (min-width: 300px) and (max-width: 430px) {
.owl-carousel.owl-loaded .owl-stage-outer {
background: white !important;
}
}"
Auto Care Service & Repair🔒 SSL Verified