Main Header product template

Hi Luke,

I have one last question to your amazing support on https://xtemos.com/forums/topic/please-open-how-to-change-font-color-of-the-header-when-hovering-the-section.

Can we customize this custom code so that it only applies to the header overlap?

Because on the product pages we have a light background. So there I actually need a black font color. I have chosen the main header there. Like in the store, where it works perfectly. So maybe we don’t need to change the CSS for the header overlap, but it’s a different problem that the main header template is not used in the product template as it it set up somehow ?

See screenshots attached please: https://imgur.com/a/g0zGeYb

Best regards,
Christian

Hello,

Sorry for the delay.

Replace the old custom with the below one:

/* Header custom: color switch */

body:not(.single-product, .woocommerce-shop) .xts-header:not(.xts-sticked):hover .xts-header-el-icon,
body:not(.single-product, .woocommerce-shop) .xts-header:not(.xts-sticked):hover .xts-nav-main > li > a,
body:not(.single-product, .woocommerce-shop) .xts-header:not(.xts-sticked):hover .xts-nav-secondary > li > a,
body:not(.single-product, .woocommerce-shop) .xts-header:not(.xts-sticked):hover .xts-nav-secondary>li.menu-item-has-children>a:after {
    transition: none;
    color: #1A1A1A;
}

body:not(.single-product, .woocommerce-shop) .xts-header.xts-sticked .xts-header-el-icon,
body:not(.single-product, .woocommerce-shop) .xts-header.xts-sticked .xts-header-scheme-light .xts-nav-main > li > a,
body:not(.single-product, .woocommerce-shop) .xts-header.xts-sticked .xts-header-scheme-light .xts-nav-secondary > li > a,
body:not(.single-product, .woocommerce-shop) .xts-header.xts-sticked .xts-header-scheme-light .xts-nav-secondary>li.menu-item-has-children>a:after {
    color: #1A1A1A;
}

body:not(.single-product, .woocommerce-shop) .xts-header:not(.xts-sticked):hover
    .xts-nav.xts-style-underline
    > li
    > a
    .xts-nav-text:after {
    background-color: #1A1A1A;
}

body:not(.single-product, .woocommerce-shop) .xts-header.xts-sticked
    .xts-nav.xts-style-underline
    > li
    > a
    .xts-nav-text:after {
    background-color: #1A1A1A;
}

body:not(.single-product, .woocommerce-shop) .xts-header:not(.xts-sticked) .xts-logo {
    filter: invert(1);
}

body:not(.single-product, .woocommerce-shop) .xts-header:not(.xts-sticked):hover .xts-logo {
    filter: none;
}

body:not(.single-product, .woocommerce-shop, .error404) .xts-header.xts-overlap-on:not(.xts-sticked):hover .xts-header-scheme-light.xts-header-row:not(.xts-with-bg),
body:not(.single-product, .woocommerce-shop, .error404) .xts-header.xts-overlap-on.xts-sticked .xts-header-scheme-light.xts-header-row:not(.xts-with-bg) {
    background-color: white;
    color: #1A1A1A;
}

Here is a code for the Shop and Product page:

body:is(.single-product, .woocommerce-shop) .xts-header .xts-header-el-icon, body:is(.single-product, .woocommerce-shop) .xts-header .xts-header-scheme-light .xts-nav-main > li > a, body:is(.single-product, .woocommerce-shop) .xts-header .xts-header-scheme-light .xts-nav-secondary > li > a, body:is(.single-product, .woocommerce-shop) .xts-header .xts-header-scheme-light .xts-nav-secondary > li.menu-item-has-children > a:after {
	 color: #1a1a1a;
}
 body:is(.single-product, .woocommerce-shop):not(.error404) .xts-header .xts-header-scheme-light.xts-header-row:not(.xts-with-bg), body:is(.single-product, .woocommerce-shop) body:not(.error404) .xts-header.xts-overlap-on.xts-sticked .xts-header-scheme-light.xts-header-row:not(.xts-with-bg) {
	 background-color: black;
	 color: #1a1a1a;
}
 body:is(.single-product, .woocommerce-shop) .xts-header-scheme-light .xts-nav-secondary.xts-style-underline > li .xts-nav-text:after {
	 background: black;
}

Kind Regards

Looks perfect, thank you! 🙂

Hello,

In case you need any additional help, I’d be more than happy to assist you.

Have a good day!

Kind Regards

[Author]

Posts