Change Pro header when triggered

[cvdw]

In this video by Josh, in the end he mention the possibility to change the header when triggered with some CSS in the Headfer CSS. In his example how to change the header color when scolled with this code:

Video: https://youtu.be/_tiraUr7Qp8?si=XlP0N85O7K7dnm7y

/Sticky state/

.x-bar.x-bar-top.x-bar-h.x-bar-is-sticky.x-bar-fixed {

background-color: pink !important;

}

He also mention you can also change the logo and menu font colors this way.

I only can’t figure out what is the right css name for that, the logo image is just .x-image img and the menu items .x-anchor-text-primary.

Can you help me with the right css to change the logo, the menu font color and for example a button background color when triggered?

Of course I can do it with one absolute bar and one sticky relative but like to try this with one…

Here is my test page: https://cresult.nl/carmen/rb/

THX, Carel

[tristup]

Hi Carel,

Thanks for reaching out.
What you are trying to achieve is required custom CSS coding, which is beyond the scope of our Theme Support. I would suggest you hire a developer who can assist you with the customization, or you can avail of our newly launched service called One, where we answer questions beyond normal theme support.

Thanks

[cvdw]

Hi,

I know it’s beyond the scope but it’s a video on the Themeco YouTube channel where they (Josh) mention the possibility of changing also the the logo and menu font color this way so I ask how…?

But Josh helped me out on Facebook group allready so solved!

Here I share his solution:

Give your menu and logo each a unique class that you can target. For the sake of this example, we’ll assume these are .logo and .menu.

Then simply use that same CSS concept above to target those specific classes. Here’s how we’d do it:

/Sticky State - This changes the bar color/

.x-bar.x-bar-top.x-bar-h.x-bar-is-sticky.x-bar-fixed {

background-color: black !important; /Change to preferenced color/

}

/Menu Links Color Change - this changes the menu link color/

.x-bar.x-bar-top.x-bar-h.x-bar-is-sticky.x-bar-fixed .menu span.x-anchor-text-primary {

color: white !important; /Change color based on your preference/

}

/Logo Invert Light - this inverts the logo - may not work with all logos/

.x-bar.x-bar-top.x-bar-h.x-bar-is-sticky.x-bar-fixed .x-image.logo {

filter: brightness(0%) grayscale(100%) invert(1) !important; /Play with filters to get the right look/

}

THX

[prakash_s]

Hello Carel,

Thanks for sharing the information, it will be helpful for others.

Thanks