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

This topic has 7 replies, 2 voices, and was last updated 9 months, 2 weeks ago by Luke Nielsen.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
February 1, 2024 at 3:45 pm #535857

Christian |cswebdesigns
Participant

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

February 2, 2024 at 6:05 pm #536315

Luke Nielsen
Keymaster

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

February 4, 2024 at 2:57 pm #536591

Christian |cswebdesigns
Participant

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

February 5, 2024 at 3:19 pm #536840

Luke Nielsen
Keymaster

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

February 5, 2024 at 6:07 pm #536903

Christian |cswebdesigns
Participant

Hi Luke,

sure, see in extra information.

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

February 6, 2024 at 4:08 pm #537275
Luke Nielsen
Keymaster
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
February 6, 2024 at 4:51 pm #537301

Christian |cswebdesigns
Participant

Wow, amazing job Luke!

Thank you so much!

February 6, 2024 at 5:42 pm #537334

Luke Nielsen
Keymaster

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

Tagged: header, hover

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘How to change font color of the header when hovering the section?’ is closed to new replies.

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

Create your WordPress website.