caret color menu item hover

[hchy]

Hello Kleo Forums,

I am Working on my Kleo 3.0 website and had a minor question (I hope its minor). I was wondering if anyone would be able to point in the right direction. I would appreciate it very much.

I am attempting to change the color of the caret on hover of a menu item. Meaning, when a user hovers over #menu-item-2815, the .caret next to #menu-item-2815 will change color but the menu item appears the same. You can see the Community Menu Item and the Caret next to it, on the Kleo 3.0 Community Demo located here:

http://seventhqueen.com/themes/kleo/members/kleoadmin/

This code changed the color of the menu item “Community”

COPY CODE

#menu-item-2815 > a:hover {
color: #00b9f7;
}

This code changed the color of the caret

COPY CODE

.navbar-nav .caret:hover:after {
color: #00b9f7;
}

Is it possible to make it so that when a user hovers over #menu-item-2815, it will change the color of the .navbar-nav .caret:hover:after only, the menu item will remain the same color? I have been trying to do this for around 2 days and was just wondering if anyone had any insight for this. Thank you again for taking the time to read this.

[sharmstr]

try this

.navbar-nav .caret:hover:after {
color: #00b9f7 !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

But…. That’s only going to work if you hover over the caret. You’d need some sort of javascript to change the caret color when you hover over the text (i.e. community)

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[hchy]

Thank you for the guidance sharmstr. This issue is now resolved. I understand you are not able to go into to much detail of course, you letting me know of the javascript is helpful enough. Have a good week!

[sharmstr]

I lied !

COPY CODE

.open .caret:after {
    color: red !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[hchy]

Wow, I was researching Javascript and learning about how some were doing it using javascript and wow it looked complex, but I never roll over and give up easily, lol. The code you have now offered works amazing!! Thank you again so very much Sharmstr. You have a great week, I really appreciate the Seventhqueen support here it is truly top notch and especially your help Sharmstr.

[sharmstr]

Great!

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Author]

Posts