Buy me a coffee

Header Color on Scroll

Add these codes to the Custom CSS box and click Save

All Pages

Header color

header#header.shrink {
    background-color: #f1f2f3 !important;
}

Navigation items

/* navigation items */
header#header.shrink div.header-nav-item>a {
    color: #f1f !important;
}

Login text

header#header.shrink [class*="auth"] {
    color: #f1f !important;
}

Social Icons

/* Social Icons */
header#header.shrink [class*="social"] svg {
    fill: #f1f;
}

Cart icon

/* Cart icon */
header#header.shrink [class*="cart"] svg {
    fill: #f1f;
    stroke: #f1f !important;
}

Cart quantity

/* Cart quantity */
header#header.shrink span.sqs-cart-quantity {
    color: #f1f;
}

Buttons

/* Buttons */
header#header.shrink a.btn {
    background-color: black !important;
    color: white !important;
}

Burger Icon

/* Burger Icon */
header#header.shrink .burger-inner>div {
    background-color: #f1f !important;
}

Burger X Close icon

/* Burger X Close icon */
body.header--menu-open header#header.shrink .burger-inner>div {
    background-color: #f1f !important;
}

Blog Page (list)

/* Blog Page (list) */
[class*="type-blog"].view-list {
/* header color */
header#header.shrink {
    background-color: #f1f2f3 !important;
}
/* navigation items */
header#header.shrink div.header-nav-item>a {
    color: #f1f !important;
}
/* Login text */
header#header.shrink [class*="auth"] {
    color: #f1f !important;
}
/* Social Icons */
header#header.shrink [class*="social"] svg {
    fill: #f1f;
}
/* Cart icon */
header#header.shrink [class*="cart"] svg {
    fill: #f1f;
    stroke: #f1f !important;
}
/* Cart quantity */
header#header.shrink span.sqs-cart-quantity {
    color: #f1f;
}
/* Buttons */
header#header.shrink a.btn {
    background-color: black !important;
    color: white !important;
}
/* Burger Icon */
header#header.shrink .burger-inner>div {
    background-color: #f1f !important;
}
/* Burger X Close icon */
body.header--menu-open header#header.shrink .burger-inner>div {
    background-color: #f1f !important;
}
}

Blog Post

/* Blog Post */
[class*="type-blog"].view-item {
/* header color */
header#header.shrink {
    background-color: #f1f2f3 !important;
}
/* navigation items */
header#header.shrink div.header-nav-item>a {
    color: #f1f !important;
}
/* Login text */
header#header.shrink [class*="auth"] {
    color: #f1f !important;
}
/* Social Icons */
header#header.shrink [class*="social"] svg {
    fill: #f1f;
}
/* Cart icon */
header#header.shrink [class*="cart"] svg {
    fill: #f1f;
    stroke: #f1f !important;
}
/* Cart quantity */
header#header.shrink span.sqs-cart-quantity {
    color: #f1f;
}
/* Buttons */
header#header.shrink a.btn {
    background-color: black !important;
    color: white !important;
}
/* Burger Icon */
header#header.shrink .burger-inner>div {
    background-color: #f1f !important;
}
/* Burger X Close icon */
body.header--menu-open header#header.shrink .burger-inner>div {
    background-color: #f1f !important;
}
}

Event List

/* Event List */
[class*="type-event"].view-list {
/* header color */
header#header.shrink {
    background-color: #f1f2f3 !important;
}
/* navigation items */
header#header.shrink div.header-nav-item>a {
    color: #f1f !important;
}
/* Login text */
header#header.shrink [class*="auth"] {
    color: #f1f !important;
}
/* Social Icons */
header#header.shrink [class*="social"] svg {
    fill: #f1f;
}
/* Cart icon */
header#header.shrink [class*="cart"] svg {
    fill: #f1f;
    stroke: #f1f !important;
}
/* Cart quantity */
header#header.shrink span.sqs-cart-quantity {
    color: #f1f;
}
/* Buttons */
header#header.shrink a.btn {
    background-color: black !important;
    color: white !important;
}
/* Burger Icon */
header#header.shrink .burger-inner>div {
    background-color: #f1f !important;
}
/* Burger X Close icon */
body.header--menu-open header#header.shrink .burger-inner>div {
    background-color: #f1f !important;
}
}

Event Detail

/* Event Detail */
[class*="type-events"].view-item {
/* header color */
header#header.shrink {
    background-color: #f1f2f3 !important;
}
/* navigation items */
header#header.shrink div.header-nav-item>a {
    color: #f1f !important;
}
/* Login text */
header#header.shrink [class*="auth"] {
    color: #f1f !important;
}
/* Social Icons */
header#header.shrink [class*="social"] svg {
    fill: #f1f;
}
/* Cart icon */
header#header.shrink [class*="cart"] svg {
    fill: #f1f;
    stroke: #f1f !important;
}
/* Cart quantity */
header#header.shrink span.sqs-cart-quantity {
    color: #f1f;
}
/* Buttons */
header#header.shrink a.btn {
    background-color: black !important;
    color: white !important;
}
/* Burger Icon */
header#header.shrink .burger-inner>div {
    background-color: #f1f !important;
}
/* Burger X Close icon */
body.header--menu-open header#header.shrink .burger-inner>div {
    background-color: #f1f !important;
}
}

Shop/ Category

/* Shop/Category */
[class*="type-products"].view-list {
/* header color */
header#header.shrink {
    background-color: #f1f2f3 !important;
}
/* navigation items */
header#header.shrink div.header-nav-item>a {
    color: #f1f !important;
}
/* Login text */
header#header.shrink [class*="auth"] {
    color: #f1f !important;
}
/* Social Icons */
header#header.shrink [class*="social"] svg {
    fill: #f1f;
}
/* Cart icon */
header#header.shrink [class*="cart"] svg {
    fill: #f1f;
    stroke: #f1f !important;
}
/* Cart quantity */
header#header.shrink span.sqs-cart-quantity {
    color: #f1f;
}
/* Buttons */
header#header.shrink a.btn {
    background-color: black !important;
    color: white !important;
}
/* Burger Icon */
header#header.shrink .burger-inner>div {
    background-color: #f1f !important;
}
/* Burger X Close icon */
body.header--menu-open header#header.shrink .burger-inner>div {
    background-color: #f1f !important;
}
}

Individual Product

/* Individual Product */
[class*="type-products"].view-item {
/* header color */
header#header.shrink {
    background-color: #f1f2f3 !important;
}
/* navigation items */
header#header.shrink div.header-nav-item>a {
    color: #f1f !important;
}
/* Login text */
header#header.shrink [class*="auth"] {
    color: #f1f !important;
}
/* Social Icons */
header#header.shrink [class*="social"] svg {
    fill: #f1f;
}
/* Cart icon */
header#header.shrink [class*="cart"] svg {
    fill: #f1f;
    stroke: #f1f !important;
}
/* Cart quantity */
header#header.shrink span.sqs-cart-quantity {
    color: #f1f;
}
/* Buttons */
header#header.shrink a.btn {
    background-color: black !important;
    color: white !important;
}
/* Burger Icon */
header#header.shrink .burger-inner>div {
    background-color: #f1f !important;
}
/* Burger X Close icon */
body.header--menu-open header#header.shrink .burger-inner>div {
    background-color: #f1f !important;
}
}

One Page

Add this code to Page Header Code Injection and click Save

<!-- One Page -->
<style>
/* header color */
header#header.shrink {
    background-color: #f1f2f3 !important;
}
/* navigation items */
header#header.shrink div.header-nav-item>a {
    color: #f1f !important;
}
/* Login text */
header#header.shrink [class*="auth"] {
    color: #f1f !important;
}
/* Social Icons */
header#header.shrink [class*="social"] svg {
    fill: #f1f;
}
/* Cart icon */
header#header.shrink [class*="cart"] svg {
    fill: #f1f;
    stroke: #f1f !important;
}
/* Cart quantity */
header#header.shrink span.sqs-cart-quantity {
    color: #f1f;
}
/* Buttons */
header#header.shrink a.btn {
    background-color: black !important;
    color: white !important;
}
/* Burger Icon */
header#header.shrink .burger-inner>div {
    background-color: #f1f !important;
}
/* Burger X Close icon */
body.header--menu-open header#header.shrink .burger-inner>div {
    background-color: #f1f !important;
}
</style>