How to change font color of the header when hovering the section?

Hello,

I would like to have the same result as on this example page: https://fearofgod.com

How can I do that? 🙂

Thank you in advance,
Christian

Hello,

Navigate to the header settings and apply the “Overlap” functionality with the bg color: https://monosnap.com/file/lsOZjyIv118QIL0FZlmynRUUcBD11Q

The color scheme in the settings of each row responsible for the text and bg color: https://monosnap.com/file/ujMthWHnDTM7kQi4XWpd6741LLpgcP

Let me know the result.

Kind Regards

Hello Luke,

thank you for your reply but my main question was a bit different: How to change font color of the header when hovering the section?

The most important parts are bold marked now.

I recorded you a short loom video to understand what I have (overlay header with wrong font color in normal view, hover font color is fine). See extra information, please.

Hope you can help! 🙂

Kind regards

Hello,

Please send me access to the admin dashboard so I can check the settings of the site and provide a solution.

Looking forward to collaborating with you!

Kind Regards

Hi Luke,

sure, see in extra information.

Thanks for your investigation. Would be very nice, if we find a solution.

Hello,

To make it work as you want, first, you need to enable the light color scheme for the header: https://prnt.sc/yd-l43DfY0zM and second, use the below code to change colors:

/* Header custom: color switch */

.xts-header:not(.xts-sticked):hover .xts-nav-main > li > a,
.xts-header:not(.xts-sticked):hover .xts-nav-secondary > li > a,
.xts-header:not(.xts-sticked):hover .xts-nav-secondary>li.menu-item-has-children>a:after {
	transition: none;
	color: black;
}

.xts-header.xts-sticked .xts-header-scheme-light .xts-nav-main > li > a,
.xts-header.xts-sticked .xts-header-scheme-light .xts-nav-secondary > li > a,
.xts-header.xts-sticked .xts-header-scheme-light .xts-nav-secondary>li.menu-item-has-children>a:after{
	color: black;
}
.xts-header:not(.xts-sticked):hover
	.xts-nav.xts-style-underline
	> li
	> a
	.xts-nav-text:after {
	background-color: black;
}

.xts-header.xts-sticked
	.xts-nav.xts-style-underline
	> li
	> a
	.xts-nav-text:after {
	background-color: black;
}

.xts-header:not(.xts-sticked) .xts-logo {
	filter: invert(1);
}

.xts-header:not(.xts-sticked):hover .xts-logo {
	filter: none;
}

body:not(.error404) .xts-header.xts-overlap-on:not(.xts-sticked):hover .xts-header-scheme-light.xts-header-row:not(.xts-with-bg), body:not(.error404) .xts-header.xts-overlap-on.xts-sticked .xts-header-scheme-light.xts-header-row:not(.xts-with-bg) {
    background-color: white;
	color: black;
}

Kind Regards

Wow, amazing job Luke!

Thank you so much!

Hello,

You are welcome! If you do not mind, can you please leave a 5 stars rating for our theme by going here: http://themeforest.net/downloads It will allow us to release more updates and provide dedicated support in future. It would encourage our work a lot.

Have a good day!

Best Regards

[Author]

Posts