[Mary Beth MParticipant]

Hello there,

While perusing themeforest looking for design ideas, I found this demo that has some neat hover effects and I’d like to know if it’s possible to recreate it in some way in X? http://the7.dream-demo.com/

I have a client that would love that but don’t want to put it in the mock-ups if it isn’t possible to re-create.

Thank you very much for any help.

Mary Beth

[JoaoModerator]

Hi Mary Beth,

Please add the following code to Appereance Customizer Custom CSS and adjust the colors according to your wishes

.x-navbar .desktop .x-nav > li > a > span:hover {
	background: -webkit-linear-gradient(left, #52b8ff, #2c68ef);
	background: linear-gradient(left, #52b8ff, #2c68ef);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
  
}

.x-navbar .desktop .x-nav > li > a > span:active {
	background: -webkit-linear-gradient(left, #52b8ff, #2c68ef);
	background: linear-gradient(left, #52b8ff, #2c68ef);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
  
}

Hope that helps

Joao

[Mary Beth MParticipant]

Thank you so much for your assistance. I threw a demo site together just to see if I could get it to work, but doesn’t seem to be yet. http://newswd.seattlewebanddesign.com/home-temp

I’m using the Icon stack if that’s relevant?

Thank you!

[Mary Beth MParticipant]

This reply has been marked as private.

[LelyModerator]

Hello Mary Beth,

Please try to update above CSS to this:

.x-navbar .desktop .x-nav > li > a:hover > span {
	background: -webkit-linear-gradient(left, #52b8ff, #2c68ef);
	background: linear-gradient(left, #52b8ff, #2c68ef);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
  
}
.x-navbar .desktop .x-nav > li.current_page_item > a > span {
    background: -webkit-linear-gradient(left, #52b8ff, #2c68ef);
    background: linear-gradient(left, #52b8ff, #2c68ef);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Hope this helps.

[Mary Beth MParticipant]

Haven’t got it to work yet. Any chance there’s a setting or file that’s overriding it somehow?

[ChristopherModerator]

Hi there,

Please clear cache and check again.
Gradient works fine on my end, please see the attachment.

Thanks.

[Author]

Posts