Please open “How to change font color of the header when hovering the section”

Hi Luke,

I wanted to reply on this thread but cannot: https://xtemos.com/forums/topic/how-to-change-font-color-of-the-header-when-hovering-the-section.

I just realized that the part for mobile view is missing. The font and logo color is not turning to black there as it does on desktop.

Could you please add this to the code as well? 🙂

In my eyes it would be better to open the other case and continue there. For others who want the same solution in the future.

Thanks Luke!

Attachments:

You must be logged in to view attached files.

Hello,

We have improved the old custom, please check this one: https://gyazo.com/5b492acf9bf9da88db4b2863184151be

/* Header custom: color switch */

.xts-header:not(.xts-sticked):hover .xts-header-el-icon,
.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-el-icon,
.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;
}

Let me know the result.

Kind Regards

Thank you, that works perfect! 🙂

Hello,

You are welcome! If you have any questions or if there’s anything specific you’d like further clarification on, please feel free to reach out

Wish you all the best.

Kind Regards

[Author]

Posts