Link hover effect (on navigation bar only).

[asht0n91]

Hi,

I am after some link effect once hovered on my navigation menu (Home, Members, Admin, Profile, etc.).

 

URL | createituk.boards.net

As it stands, there is no hover over the buttons and look bland when clicking them ... I'm after some kind of rollover affect, maybe it adds an underline of a different colour, a flashing arrow next to the name when hovered, etc.

Could someone point me in the right direction ... or would they advise that the best way is to create two separate images (as as it stands, it's just text based).  

[David Clark]

Hi asht0n91. I'm gonna move this thread to the Themes board instead since the solution for you will likely be CSS based -- that code will be going into your style sheet, not your header or footer.

You can add hover effects with CSS no problem, but the question is what sort of effect would you like? We can add an underline if that's what you'd like, or we can have it apply an animated glow effect, we can have it shrink, or grow, or become bolded/italicized, etc... it's up to you. If it can be applied via CSS, it can be made into a hover effect for your navigation bar.

[asht0n91]

Oct 9, 2014 15:20:40 GMT -8 David Clark said:

Hi asht0n91. I'm gonna move this thread to the Themes board instead since the solution for you will likely be CSS based -- that code will be going into your style sheet, not your header or footer.

You can add hover effects with CSS no problem, but the question is what sort of effect would you like? We can add an underline if that's what you'd like, or we can have it apply an animated glow effect, we can have it shrink, or grow, or become bolded/italicized, etc... it's up to you. If it can be applied via CSS, it can be made into a hover effect for your navigation bar.

Sorry for not putting this in the correct location.

Errm ... the choice is hard, I'd have to have a look when it's applied on the forum. Once the CSS is in place, how difficult would it be to cycle through the different options available to decide upon my choice??

[asht0n91]

Bump.

[David Clark]

I think what might be a better procedure is having you find an example of some hover effects that you like and linking us to them in this thread -- there are a great many different types of CSS that can be applied on hover, so there's not really a way to quickly/easily compare them if you're not familiar with CSS.

[asht0n91]

Understood. Erm ... maybe can we go with a glow? Something simple, so users can see that their cursor is hovering over the link please.

[David Clark]

Try giving this a whirl, asht0n91 - go to Admin > Themes > Advanced Styles & CSS > Style Sheet tab and paste this code at the bottom of that document:

#navigation-menu > ul li a:hover {
text-shadow: 0px 0px 15px #FFFFFF;
}