Help with animated hover on active link

[kerninglife]

I need some help figuring out how to set the animated hover to an “on” state when a link on my navigation is active instead of just animating the underline. My code is below even though the animated hover does not work. Why I am not sure.

http://codepen.io/kerninglife/pen/ieKoc?editors=110

[Paulie_D]

If, by “active”, you mean ‘this indicates I’m on this current page’ then there are multiple options depending on the number of pages you have.

More often than not a javascript/Jquery solution is the better option.

[kerninglife]

Yes, an indicator that says this is the page you are on. I will only have two pages max. How would I go about figuring out what js code is needed for that?

[Paulie_D]

You really don’t need Js in that instance.

If you only have two pages then you give each of them an ID for the body.

Then for each respective link on their set page you add, say a class of ‘current’ and target in the CSS.

So, let’s say you give the Homepage an ID of#home.

On the homepage menu you give the link to #home (and only that link) a class of ‘current`.

Then in your CSS

#home a.current {
/*your styles here */
}

…and so on for each page.

[kerninglife]

I’m not sure if I follow entirely. Would I give the nav item an id such as #home, then apply the css of the hover to it? I’m completely new to this before and after stuff.

[Author]

Posts