-
Posts
-
Hello,
It’s again me ;-)
I’m trying to change to color of the content: “25be”; in my menu item 559(secondary nav menu, third menu item). But when i apply a color to the little arrow of this menu item, it colors all the line (text+arrow).
is there a solution to just color the arrow (25be) ?
Better : Is there a solution to color just a few second the arrow (then it return to the the origin color (white)) ?Thx a lot :)
E.
The blog I need help with is cgtpoitoucharentes.wordpress.comBut when i apply a color to the little arrow of this menu item, it colors all the line (text+arrow).
That’s right. The menu item consists of both the menu text and the arrow and it’s not possible to give them different colours.
I’m trying to change to color of the content: “25be”; in my menu item 559(secondary nav menu, third menu item).
For reference, that menu item is the one with the label of “L’activité CGT en région”
But when i apply a color to the little arrow of this menu item, it colors all the line (text+arrow).
I researched your custom CSS and found that you currently have the following rules saved which reference the ID value “menu-item-559”
#menu-item-559 a:hover {
background-color: #fff
}
#menu-item-559 ul ul ul {
background-color: #B90504
}The first rule looks like it only applies to the text of that item on hover, and the second rule looks like it applies to submenus three levels deep.
is there a solution to just color the arrow (25be) ?
Since the arrow is setup in the theme using the :after pseudo element, you can color the arrow by itself as you asked. Here is an example snippet that illustrates how:
#menu-item-559 a:after{
color: aqua;
}Is there a solution to color just a few second the arrow (then it return to the the origin color (white)) ?
I have never tried that before, but I can help you research it. Here is what I’ve found so far:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
I researched the fade in and fade out things a little bit. I think you can do a fade in on hover and a fade out when the mouse moves away using transitions. I came up with this:
#menu-item-559 a:after {
color: aqua;
transition: color linear 1s;
}
#menu-item-559 a:hover:after {
transition-property: color;
transition-duration: 1s;
transition-timing-function: ease-in;
color: red;
}But to get it to fade out on it’s own *while* the mouse is still hovering, that’s a bit more complex what I can do is point you to some guidelines that will get you started so you can write the CSS on your own. I think you might be able to do it with CSS3 animations! However, be aware that transitions and animations are only supported in the very latest browsers and in fact they are a working draft. To find out which browsers support which properties, you can check a site such as http://caniuse.com/
I searched with Google about getting something to fade in then fade out, and this is the closest I could find:
http://stackoverflow.com/questions/16733831/css3-fade-in-pause-fade-out-on-hover
Working on an animation more than this would be quite a bit beyond normal theme support. :)
Oh Designsimply ! You’re the woman for this job ! :) It works already very well with your css code !
The only thing I would like to do is not highlight with this animation the submenu id=”menu-item-894″ (by keeping the ordinary white arrow when i open the main menu (559) as ordinary).
Thx a lot for your precious help Designsimply, you rock :)
E.
Sorry, I don’t understand. Do you mean that you to keep the white arrow static when you hover on any submenu items with children in the menu in the left sidebar?
If you want to limit some of your CSS to just one level in a place that has several levels (like menus), then you could using something called a child combinator selector—which is essentially putting an “>” symbol into the right place in the CSS selector. You might like this article which has some good explanations about combinators:
I found the solution !
Thx for your precious help :) :)
E.
The topic ‘Color of a content (arrow) in menu item’ is closed to new replies.
Theme Support 