Hello,

Potentially a challenging one for you... :)

I'm looking to give the active link on my main nav a solid background - much like the menu on this site. I kind of managed to do it using the CSS:

header#top nav .sf-menu > li.current-menu-item > a {
color: #676767 !important;
background-color: #27CCC0 !important;
}

But my background-color runs all the way to the bottom of the padding (instead of closely circling the menu item, as on this site.. I've attached a screenshot of what I'm trying to achieve). What do I need to add to prevent this?

And here is the trickier bit... The site will be a one-page site, and I'd really like the background rectangle for 'current-menu-item' to transition smoothly as I scroll down the page (like it's a block moving along behind the menu text). I guess this needs some sort of animation?

Can you help?

Thanks in advance for any help or advice.

Cheers,
Mike

P.S. The site isn't live yet, hence the lack of URL...

Thanks Tahir,

I\'ve been trying to use \'inspect element\' to locate the right CSS, but I get confused by the change of the nav\'s CSS when it changes from solid to transparent as you scroll down the page.

Once it\'s live I\'ll give you the URL and I\'m sure you can put me straight :)

What about the animation of the \'background block\'? Will that be something that can be achieved through custom CSS or will it need something more?

Many thanks,

Mike

That\'s fantastic Tahir, thank you. I was almost there - think I was putting .current-menu-item in the wrong place entirely.