Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Hello Mandody,
Not sure if this is exactly what you are looking for, but you can try the following CSS code, and adjust the timing (.75s) to your liking.
#branding ul.menu li:hover > a {
-moz-transition: all .75s;
-webkit-transition: all .75s;
-o-transition: all .75s;
transition: all .75s;
}
Cheers,
Michael
Thanks for both replies 🙂 eGriffinWebDesign – it almost worked perfectly! The text is fading in beautifully, but sadly the fade isn’t working on the box/background. Check it out: http://www.mandody.com
Any ideas how I can get the box fading in too?
I feel I’m getting close 😉
Many thanks again.
OK…I’ve been playing around with CSS3 transitions (thanks for the link Andrew). Almost got it working, but for some reason when I hover over the menu items I still get the white block appearing…fade is working in the background but the white block obscures it. Hmmm?? How can I get rid of the white block rollover…been digging around in the code but can’t seem to find reference to it – but I am a newbie 😉
Looking great Mandody! I think to get it exactly how you want it you just need to change your CSS
#branding ul.menu li:hover > a {
background-color: #ffcc00;
}
to
#branding ul.menu li:hover > a {
background: #ffcc00!important;
}
That should override the theme styles properly. Hopefully that works for you.
Cheers!
Michael
Perfect! 🙂 Thank you Michael. That worked a treat. Menu’s looking lovely 😉
Awesome! Glad I could help!
Cheers,
Michael
