Fading menu buttons

Try using CSS3 transitions: https://css-tricks.com/almanac/properties/t/transition/

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: https://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